JavaScript定时器-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript定时器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript定时器有两种，

setTimeout()：指定时间后执行一段代码（延迟执行）。
setInterval()：每隔一段时间执行一段代码（间隔执行）。

1、setTimeout() 定时器

语法：

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
具体用法：
定时五秒钟出现弹窗‘你好‘’

window.setTimeout(function(){
            alert('你好');
        },5000);

注意点：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
setTimeout() 这个调用函数我们也称为回调函数callback，普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

2、停止 setTimeout() 定时器


let t = setTimeout(function(){
            alert('你好');
        },5000);

clearTimeout(t);    // 传入定时任务的标识符
console.log("任务取消，五秒后我不会有任何输出！")

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。

3、setInterval() 定时器

语法：

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
具体用法：
设置一个定时器，每隔2秒打印一次‘你好’

  setInterval(function(){
            console.log('你好')
        },2000);

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

4、清除setInterval() 定时器

let t = setInterval(function(){
            console.log('你好')
        },2000);
 
// 用上面学到的 setTimeout() 来取消循环定时任务
setTimeout(() => {
    clearInterval(t); 
    console.log("我在五秒时被取消！");
;}, 5000);