js定时器setInterval、clearInterval的使用方法举例

 更新时间:2023年11月13日 15:07:25   作者:彭世瑜  
Javascript的setTimeOut和clearInterval函数应用非常广泛,它们都用来处理延时和定时任务,这篇文章主要给大家介绍了关于js定时器setInterval、clearInterval使用方法的相关资料,需要的朋友可以参考下

定时器:可以在固定时间间隔,重复调用一个函数

文档

常用的语法

// 设置定时器
var intervalID = setInterval(function[, delay]);

// 清除定时器
clearInterval(intervalID)

为了避免this指向问题,一般使用箭头函数

// 总的执行5次
let total = 5;
// 每5秒执行一次
let delay = 1000 * 5;
// 执行计数
let count = 0;

function task() {
    count++;
    console.log(new Date().toLocaleString());

    // 执行5次后清除定时器
    if (count >= total) {
      clearInterval(intervalID);
    }
}

// 每5秒执行一次
let intervalID = setInterval(() => {
    task();
}, delay);

输出结果

2023/2/3 17:00:29
2023/2/3 17:00:34
2023/2/3 17:00:39
2023/2/3 17:00:44
2023/2/3 17:00:49

附:js clearInterval 多个定时任务 全部清除

for循环内小于定时数, 就会留一个当前执行的任务, 小于等于就是全部清除。

var  end = setInterval(function(){}, 100);
var start = (end - 100) > 0 ? end -100 : 0;
for(var i = start; i < end; i++)
{
     clearInterval(i);
}

总结

到此这篇关于js定时器setInterval、clearInterval使用方法的文章就介绍到这了,更多相关js定时器setInterval、clearInterval内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js事件绑定快捷键以ctrl+k为例

    js事件绑定快捷键以ctrl+k为例

    js为快捷键绑定事件,当按这个快捷键时就会触发事先绑定处理函数,下面以ctrl+k为例与大家分享下具体的实现代码
    2014-09-09
  • 仿谷歌主页js动画效果实现代码

    仿谷歌主页js动画效果实现代码

    昨天看到谷歌的主页上出现了几个动画,发现不是flash做的,而是用js+图片实现的!今天把拷贝到的图片,用js实现了动画效果!
    2013-07-07
  • 一篇文章让你搞懂JavaScript 原型和原型链

    一篇文章让你搞懂JavaScript 原型和原型链

    这篇文章主要介绍了一篇文章让你搞懂JavaScript 原型和原型链,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • JavaScript中的this指向绑定规则及常见面试总结

    JavaScript中的this指向绑定规则及常见面试总结

    这篇文章主要为大家介绍了JavaScript中的this指向绑定规则及箭头韩硕中的this指向,还b包含了常见面试总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • javascript设计模式 – 单例模式原理与应用实例分析

    javascript设计模式 – 单例模式原理与应用实例分析

    这篇文章主要介绍了javascript设计模式 – 单例模式原理与应用,结合实例形式分析了javascript单例模式原理、定义、应用场景及相关操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 把input初始值不写value的具体实现方法

    把input初始值不写value的具体实现方法

    比如制作一个最常见的,input初始值,一般以前,我都只是写在input的value里,要把初始值单独写出来,于是我比较傻逼,就用<span>标签写,定位在input上,让它单击和input获焦上都消失
    2013-07-07
  • javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现

    下面小编就为大家带来一篇javaScript给元素添加多个class的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 小程序自定义组件全局样式不生效的解决方法

    小程序自定义组件全局样式不生效的解决方法

    在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-08-08
  • JavaScript实现拖动模态框

    JavaScript实现拖动模态框

    这篇文章主要为大家详细介绍了JavaScript实现拖动模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js 纯数字不重复排列的另类方法

    js 纯数字不重复排列的另类方法

    有一组数据,大概10万个左右,每一单位的值不会大于30000,要求按照由大到小的顺序不重复输出。
    2010-07-07

最新评论