JavaScript定时器 setTimeout/setInterval

2021/3/22 19:26:35Chixm85 阅读0 点赞2 评论

setTimeout 和 clearTimeout

setTimeout() 延时定时器，即多久时间之后去执行(一次性的)

语法：

主要包含两个参数，函数和单位为毫秒的数值。

// 一
setTimeout("function();",delaytime);
// 二
// 定义一个变量 (timerId) 用于保存 setTimeout() 这个定时器，以便使用 clearTimeout(timerId) 来取消。
let timerId;
timerId = setTimeout("function();",delaytime);
//----------------------------------
// 3秒后在console里打印一句1
function x(){
    console.log(1);
}
setTimeout(x,3000);
// 上面代码等效下面的代码
setTimeout(function (){
    // alert(1)
    console.log(1);
},3000);

并且可以使用 clearTimeout() 来取消执行 setTimeout()

clearTimeout(timerId );

setInterval 和 clearInterval

setInterval间隔定时器，每隔一段时间就执行一次（重复执行）语法：和 setTimeout() 用法一样，区别仅在于一次性执行和重复执行，主要包含两个参数，函数和单位为毫秒的数值。

// 每个1秒打印会一个数，让i一直加1
setInterval(fn,1000)
var i = 0;
function fn(){
    i++;
    console.log(i)
}

使用clearInterval()来取消执行setInterval()

demo

点击移动div

<body>
    <button>停止</button>
    <div class="box"></div>
    <script>
       let box = document.querySelector('.box');
       let btn = document.querySelector('button');
       let num = 0;
       // 1.要结束一个定时器，就先声明一个变量（存定时器）
       let timer = null;
       box.onclick = function(){
            // 3.当多次执行时，先把上一次开着的定时器关掉，再往下执行开新的
            clearInterval(timer); //第一次执行时这还是个undefined，会自动忽略
            // 2.然后把（开）定时器里的内容存起来
            timer = setInterval(function(){
                num+=3;
                box.style.left = num+'px';
            },30);
       }
       btn.onclick = function(){
          clearInterval(timer);
       }
    </script>
</body>

定时器有多次执行或者使用setInterval()时一定要先关再开！！！否则很容易出现一些不可预料的情况。

setTimeout 和 clearTimeout

setInterval 和 clearInterval

demo

点击移动div

评论区