JS之延时器和定时器执行示例详解

 更新时间:2023年07月10日 11:00:34   作者:瑟闻风倾  
这篇文章主要为大家介绍了JS之延时器和定时器执行示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1. 延时器setTimeout:延时执行一次

  • setTimeout("function",time) 设置一个超时对象 ,该方法接收一个id表示一个定时器
var timer1 = setTimeout(function(){},1000);  //timer1->1 (当前是第一个定时器)
  • clearTimeout(对象) 清除已设置的setTimeout对象 :由 setTimeout() 返回的 ID 值可用作 clearInterval() 方法的参数
clearTimeout(timer1); //清除定时器

clearTimeout(1); //清除第一个定时器
  • setTimeout使一段代码在指定时间后运行,仅运行一次

2. 定时器setInterval:定时重复执行

  • setInterval("function",time) 设置一个超时对象,该方法返回一个id表示一个定时器
var timer2 = setInterval(function(){},1000);  //timer2->2 (当前是第二个定时器)
  • clearInterval(对象) 清除已设置的setInterval对象:由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
clearInterval(timer2);//清除定时器

clearInterval(2);//清除第二个定时器
  • setInterval使一段代码每过指定时间就运行一次,自动重复

总结:

两种方法根据不同的场景和业务需求择而取之,一般情况下setTimeout用于延迟执行某方法或功能,

setInterval则一般用于刷新表单,对于一些表单的假实时指定时间刷新同步。

setInterval会产生回调堆积,特别是时间很短的时候,一般不用setInterval,而用setTimeout的延时递归来代替interval。

很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的, 这样,函数外的setTimeout在执行函数时再次触发setTimeout,从而形成周而复始的定时效果。使用的时候各有各的优势,使用setInterval,需要手动停止。而使用方法中嵌套setTimeout,可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。其实两个东西完全可以相互模拟,具体使用那个,看当时的需要而定了。

示例:

var intervalId = setInterval(function(){
    console.log("love");
},1000);
setTimeout(function(){
    console.log("yaya");
    clearInterval(intervalId);
},5000);  
console.log("yang");

运行结果:

> "yang"
> "love"
> "love"
> "love"
> "love"
> "love"
> "yaya"

> "yang"
> "love"
> "love"
> "love"
> "love"
> "yaya"

以上就是JS之延时器和定时器执行示例详解的详细内容,更多关于JS延时器定时器的资料请关注脚本之家其它相关文章!

相关文章

最新评论