定时器

171 阅读2分钟

定时器

反复性定时器

定时器函数:间歇性函数,反复性定时器,可以让代码反复执行

声明反复性定时器

语法:windows.setInterval(函数,时间) 执行:每隔一段时间自动调用一次函数

代码演示:

function getUp() {
        console.log("起床啦");
      }
setInterval(getUp, 3000);

清除反复性定时器

语法:clearInterval(定时器标识)

代码演示:

let timer = setInterval(() => {
        console.log("嘻嘻嘻嘻");
        // 执行一次定时器后清除
        clearInterval(timer);
      }, 1000);

延迟性定时器

延迟函数:又称一次性定时器,延迟性定时器,可以让一段代码延后执行

声明延迟性定时器

语法:window.setTimeout(函数,时间)

执行:会延迟一段时间,再执行代码,而且代码只会执行一次

代码演示:

function aaa() {
        console.log("哈哈哈哈哈");
      }
setTimeout(aaa, 1000);

清除延迟性定时器

语法:clearTimeout(定时器标识)

结合使用

我们通常将延迟性函数递归函数一起使用,来实现反复性定时器的功能。同时这种方法也可以解决反复性函数会延迟一秒执行的bug,因为函数会在调用前执行一次。

代码演示:

//延迟函数配合递归函数实现反复性定时器用例
let timer
function fn(){
  console.log('延迟性定时器实现的反复性定时器')
  timer=setTimeout(fn,1000)
}
fn()

注意事项

  • 定时器函数的时间单位为毫秒
  • 清除定时器时必须要有定时器标识,标识会在定时器创建时自动返回。因此我们在创建定时器时,会声明一个变量用来存储定时器标识,方便我们在清除定时器时使用
  • 定时器括号中的函数相当于回调函数,使用时无需给函数加括号。因为饿加括号相当于调用函数,函数会不定定时器直接执行