JS中2种定时器的使用及清除的实现

更新时间：2022年08月05日 11:31:40 作者：燕穗子博客

本文主要介绍了JS中2种定时器的使用及清除的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、什么是定时器？

定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码。

二、定时器的分类

1、一次性定时器：

setTimeout：设置一个定时器，在定时器到期后执行一次函数或代码段

使用方法：var timer=setTimeout(fun,毫秒数)

清除的方法：clearTimeout(timeoutId)

//一次性
var timeoutId = window.setTimeout(fun[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
//timeoutId: 定时器ID
//fun: 延迟后执行的函数
//code: 延迟后执行的代码字符串，不推荐使用原理类似eval()
//delay: 延迟的时间（单位：毫秒），默认值为0
//param1,param2: 向延迟函数传递而外的参数，IE9以上支持

2、周期性定时器：

setInterval: 以固定的时间间隔重复调用一个函数或者代码段
使用方法：var timer=setInterval(fun,毫秒数)
清除的方法：clearInterval(timer)

//周期性
var intervalId = window.setInterval(fun, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
//intervalId: 重复操作的ID
//func: 延迟调用的函数
//code: 代码段
//delay: 延迟时间，没有默认值

三、清除定时器

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。

要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。如下：

//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
 
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
   //your codes
},1000)
 
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);
 
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);

注：有时候在写的时候，还会习惯将清空的定时器的变量置空，这样写既可以释放内存，也可以便于后边代码的判断。

到此这篇关于JS中2种定时器的使用及清除的实现的文章就介绍到这了,更多相关JS 定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现一个逐步递增的数字动画
可视化大屏项目使用最多的组件就是数字组件，本文主要介绍了js实现一个逐步递增的数字动画，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
微信小程序实现自动定位功能
这篇文章主要为大家详细介绍了微信小程序实现自动定位功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
JavaScript生成验证码并实现验证功能
这篇文章主要介绍了JavaScript生成验证码并实现验证功能的相关资料,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
JS上传图片前实现图片预览效果的方法
这篇文章主要介绍了JS上传图片前实现图片预览效果的方法,涉及javascript操作图片的技巧,需要的朋友可以参考下
2015-03-03
元素全屏的设置与监听实例
下面小编就为大家带来一篇元素全屏的设置与监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
javascript下利用arguments实现string.format函数
sitepoint上看到Andrew Tetlaw在08年写的文章arguments: A JavaScript Oddity，阅读之后，除了对arguments温故知新一遍以外，印象最深刻的还是Andrew的第一个函数实现的string.format功能。
2010-08-08
微信小程序后端实现授权登录
这篇文章主要介绍了微信小程序后端实现授权登录,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
bootstrap3-dialog-master模态框使用详解
这篇文章主要为大家详细介绍了bootstrap3-dialog-master模态框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
本篇文章主要是对window.opener=null;window.close(),只支持IE6不支持IE7,IE8的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
前端JavaScript实现本地模糊搜索功能的方法实例
对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验,这篇文章主要给大家介绍了关于前端JavaScript如何实现本地模糊搜索功能的相关资料,需要的朋友可以参考下
2021-07-07