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-&gt;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延时器定时器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Jquery调用iframe父页面中的元素及方法
对于javascript操作iframe父级页面元素的方法，大家应该都非常清楚了，下面结合当前非常流行的jquery分享一下如何使用jquery查找和操作iframe父级页面元素的实现代码。
2016-08-08
Js冒泡事件详解及阻止示例
如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播
2014-03-03
微信小程序中使用自定义字体的实现与体验优化
由于微信支持的字体非常有限,不能满足个性化的需求,因此在开发的过程中可能会需要使用自定义字体,下面这篇文章主要给大家介绍了关于微信小程序中使用自定义字体的实现与体验优化的相关资料,需要的朋友可以参考下
2022-02-02
微信/支付宝小程序实现弹窗动画缩放到某个位置的示例代码
本文详细介绍了如何使用HTML、CSS和JavaScript实现动画函数,包括参数设置和动画过程中的状态管理,文章还涉及了如何获取DOM元素、设置动画开始和结束的回调函数,感兴趣的朋友跟随小编一起看看吧
2024-10-10
使用layui实现树形结构的方法
今天小编就为大家分享一篇使用layui实现树形结构的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS Excel读取和写入操作（模板操作）实现代码
前一段时间一直在做报表，所以肯定会用到Excel的操作，但是在网上查阅资料有关JS操作excel较少，有的话，也都是老生常谈或很零碎的一些东西。
2010-04-04
如何基于filter实现网站整体变灰功能
这篇文章主要介绍了如何基于filter实现网站整体变灰功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
javascript判断是手机还是电脑访问网页的简单实例分享
在智能手机越来越普及甚至是泛滥的时候，确实给大家的生活带来了很大的方便，但是对于web前端设计师来说，可就麻烦多了，现在很多的网站在制作过程中都要考虑到手机访问的问题，那么我们如何来判断客户端是不是手机呢，下面分享个例子吧
2014-06-06
深入学习JavaScript中的promise
这篇文章主要介绍了深入学习JavaScript中的promise，Promise对象的主要⽤途是通过链式调⽤的结构，将原本回调嵌套的异步处理流程，转化成“对象.then().then()...”的链式结构
2022-06-06
Layui弹出层加载做编辑页面的方法
今天小编就为大家分享一篇Layui弹出层加载做编辑页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09