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);

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇

)">
下一篇>>