js中的定时器

向右看齐 2022-07-13 23:25 182阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
    //--------------------------------js中的定时器-------------------
                    //setInterval();   setTimeout();
                    //    var num = 0;
    
                    //每1000毫秒执行一次这个函数（循环执行）
                    //    setInterval(function () {
                    //        console.log(num);
                    //        num++;
                    //    },1000);
    
    
                    //用途：setInterval()循环定时器；周而复始的执行（循环执行）
                    //用途：setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）
    
    
                    //定义方法1(匿名函数)
                    //    setInterval(function () {
                    //        console.log(1);
                    //    },1000);
    
    
                    //    //定义方法2
                    //    setInterval(fn,1000);
                    //    function fn(){
                    //        console.log(2);
                    //    }
    
                    //定义方法3
                    //    setInterval("fn(3)",1000);
                    //    function fn(aaa){
                    //        console.log(aaa);
                    //    }
    
    
    //--------------------------定时器的高级操作-------------------------
                    //返回值，清除定时器。
                    var num = 1;
    
                    //setInterval他的返回值就是定时器的名字
                    var timer = setInterval(function () {
                        console.log(num);
                        num++
    //                    定时几秒 自动清除
                        if(num===10){
                            //如何停止定时器呢？？？
                            clearInterval(timer);
                        }
                    },500);
    </script>
    </body>
    </html>