liaooo

标签： 定时器

  • 定时器-延时函数

    setTimeout() / clearTimeout()

    语法：

    setTimeout(回调函数,延迟毫秒数)

    setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

    清除延时函数

    let timer = setTimeout(回调函数,延迟毫秒数) //把定时器的ID给变量timer
clearTimeout(timer) //通过ID清除定时器

    需要注意的是setTimeout()和setInterval()共用一个编号池，技术上，clearTimeout()和 clearInterval()可以互换。但是，为了避免混淆，不要混用取消定时函数。

    在同一个对象上（一个window或者worker），setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。

    window.setTimeout – Web API 接口参考 | MDN

    结合递归函数让setTimeout()实现setInterval()的效果

    let i= 0
function test(){
  i++
  setTimeout(test,1000)  //注意：setTimeout内的函数不需要写括号
  console.log(i);
}
test()

    两种定时器对比

    • setInterval() 的特征是重复执行，首次执行会延时
    • setTimeout() 的特征是延时执行，只执行 1 次
    • setTimeout() 结合递归函数，能模拟 setInterval() 重复执行
    • clearTimeout() 清除由 setTimeout() 创建的定时任务

    拓展

    console.log(111)

setTimeout(function () {
  console.log(222)
	}, 0)

console.log(333)

//结果 111 333 222

    详见js执行机制

  • 定时器-间歇函数

    开启定时器

    作用:

    • 每隔一段时间调用这个函数
    • 间隔时间单位是毫秒
    setInterval(函数名,间隔时间)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    关闭定时器

    let 变量名 = setInterval(函数名，间隔时间)
clearInterval(变量名)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    window.setInterval – Web API 接口参考 | MDN