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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • jquery及js实现动态加载js文件的方法

    jquery及js实现动态加载js文件的方法

    这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下
    2016-01-01
  • 微信小程序登录获取不到头像和昵称的详细解决办法

    微信小程序登录获取不到头像和昵称的详细解决办法

    相信好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时却获取不到,下面这篇文章主要给大家介绍了关于微信小程序登录获取不到头像和昵称的详细解决办法,需要的朋友可以参考下
    2022-12-12
  • JavaScript和CSS交互的方法汇总

    JavaScript和CSS交互的方法汇总

    本文总结了5种javascript与CSS交互的方法,都是平时项目中经常用到的,这里推荐给大家
    2014-12-12
  • 微信小程序wepy框架笔记小结

    微信小程序wepy框架笔记小结

    这篇文章主要介绍了微信小程序wepy框架笔记小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • javascript实现画不相交的圆

    javascript实现画不相交的圆

    这篇文章主要介绍了javascript实现画不相交的圆,这个也是阿里巴巴的笔试题,只不过忘记当时是不是要求必须用canvas来实现,下篇文章再写吧。
    2015-04-04
  • JS实现一个秒表计时器

    JS实现一个秒表计时器

    这篇文章主要为大家详细介绍了JS实现一个秒表计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信小程序引入模块中wxml、wxss、js的方法示例

    微信小程序引入模块中wxml、wxss、js的方法示例

    这篇文章主要介绍了微信小程序引入模块中wxml、wxss、js的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 微信小程序之小豆瓣图书实例

    微信小程序之小豆瓣图书实例

    本篇文章主要介绍了微信小程序之小豆瓣图书实例,具有一定的参考价值,有兴趣的同学可以了解一下。
    2016-11-11
  • 学习JavaScript设计模式之观察者模式

    学习JavaScript设计模式之观察者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的观察者模式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript设计模式之命令模式

    JavaScript设计模式之命令模式

    这篇文章主要介绍了JavaScript设计模式之命令模式,对设计模式感兴趣的同学,可以参考下
    2021-04-04

最新评论