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

目录
  • 一、什么是定时器？
  • 二、定时器的分类
    • 1、一次性定时器：
    • 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 定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript实现定时器循环展示数组

    本文实例为大家分享了JavaScript实现定时器循环展示数组的具体代码,供大家参考,具体内容如下 先看看效果图 流程 使用数组的slice() 方法通过条件判断截取原数组相应内容组成新数组 循环数组 let currentPage = 0 // arr:原数组 newLen:新数组需要的长度 currentPage:现在的页码 // 方法一: function loopData(arr, newLen) {   let len = arr.length;   let result = len

  • JavaScript中定时器setTimeout()和setInterval()的用法

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setTimeout(func|code, delay) 上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名

  • JavaScript 定时器关键点及使用场景解析

    目录 正文 关于计时器的关键点 异步函数 setTimeout setInterval 区别 使用场合 总结 正文 JavaScript 定时器是实现循环行为甚至触发延迟操作的好功能.无论有什么基于时间的逻辑,定时器都可以提供支持.在 JavaScript 中有两个定时器函数:setTimeout 和 setInterval .接下来看看有哪些定时器以及它们是如何工作的. 关于计时器的关键点 在深入了解定时器的具体细节之前,有几个非常关键的点需要记住. 并不完全准确 定时器要么在一定秒数后触发一

  • JavaScript定时器原理

    JavaScript定时器原理

    目录 一. setTimeout() 定时器 二.停止 setTimeout() 定时器 三.setInterval() 定时器 四.清除setInterval() 定时器 五.电子时钟案例 前言: 在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述. 首先,我们先来看看定时器,在JS中,有两种定时器: 一. setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTime

  • 浏览器切换到其他标签页或最小化js定时器是否准时测试

    浏览器切换到其他标签页或最小化js定时器是否准时测试

    目录 前言 浏览器可见和不可见状态 setInterval setTimeout requestAnimationFrame 总结 如何解决 前言 这是我最近开发碰到的一个问题,本文是我测试出来的实践结果,供大家参考. 关于js定时器,setInterval和setTimeout,作为我们日常开发经常使用到的方法,大家一定非常熟悉.比如下面一个例子: setInterval(() => { console.log('1'); }, 500); 作为刚学前端没多久的新人也能知道,这段代码就是每过5

  • JS定时器不可靠的原因及解决方案

    JS定时器不可靠的原因及解决方案

    目录 前言 定时器工作原理 setInterval调用被废弃 事件循环 导致定时器不可靠的原因 延迟执行时间有最大值 解决方案 总结 前言 在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行.想要知道为什么会这样,我们首先需要了解Javascript计时器的工作原理. 定时器工作原理 为了理解计时器的内部工作原理,我们首先需要了解一个非常重要的概念:计时器设定的延时是没

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

    目录 一.什么是定时器? 二.定时器的分类 1.一次性定时器: 2.周期性定时器: 三.清除定时器 一.什么是定时器? 定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码. 二.定时器的分类 1.一次性定时器: setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段 使用方法:var timer=setTimeout(fun,毫秒数) 清除的方法:clearTimeout(timeoutId) //一次性 var timeoutId = window.setTime

  • iOS中几种定时器的实现小结

    在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资料,大概有三种方法:NSTimer.CADisplayLink.GCD.接下来我就一一介绍它们的用法. 一.NSTimer 1. 创建方法 NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selecto

  • 总结Node.js中9种fs模块文件操作方法(文件夹递归删除知识)

    总结Node.js中9种fs模块文件操作方法(文件夹递归删除知识)

    目录 一.前言 二.fs.mkdir()创建文件夹 2.1 最简单的案例 2.2 递归创建文件夹 三.fs.wirteFile()创建.写文件 3.1 创建并写入一个文件 3.2 重写文件并指定编码 3.3 写入GBK格式的文件 四.fs.appendFile()文件后追加内容 4.1 使用追加的方式创建并写入内容 4.2 追加内容 五.fs.stat()判断路径是目录还是文件 5.1 判断文件案例 六.fs.readFile()读取文件内容 6.1 以默认格式读取文件 6.2 以指定格式(这里

  • 浅谈js中几种实用的跨域方法原理详解

    浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

  • 浅谈JS中几种轻松处理'this'指向方式

    我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向. 例如,咱们可以在类数组对象上使用数组方法: const reduce = Array.prototype.reduce; function sumArgs() { return reduce.call(arguments, (sum, value) => { return sum += value; }); } sumArgs(1, 2, 3); // => 6 另一方面,this 很难把握. 咱们经常会发现自己用的 this

  • js中几种去掉字串左右空格的方法

    //recon 的思路: //------------- //去掉字串左边的空格 function ltrim(str) { if (str.charat(0) == " ") {   //如果字串左边第一个字符为空格   str = str.slice(1);//将空格从字串中去掉   //这一句也可改成 str = str.substring(1, str.length);   str = ltrim(str);   //递归调用 } return str; } //去掉字串右边的

  • JS中自定义定时器让它在某一时刻执行

    有时,处于需求的原因,我们需要在JS中写一个方法,然后让它在某一时刻执行,即需要在JS中写一个定时器,当时间达到要求时间时,需要执行的方法自动执行,下面小编简单说一下我是怎么实现的 var tMinutes=0; var tHours=0; var go; function dingshi(hours,minutes){ tHours = hours; tMinutes = minutes; go=setInterval(run,3000); } function run(){ var date

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

  • js中区分深拷贝与浅拷贝的实战过程

    js中区分深拷贝与浅拷贝的实战过程

    目录 一.自我理解 二.数据存储形式 (1)基本数据类型存储于栈中 (2)引用数据类型存储与堆中 三.怎样实现深拷贝? (1)借助JSON对象的parse和stringify (2)手写递归 (3)JQuery中extend方法 总结/注意 总结 一.自我理解 简单来讲就是:深拷贝层层拷贝,浅拷贝只拷贝第一层. 在深拷贝中,新对象中的更改不会影响原对象,而在浅拷贝中,新对象中的更改,原对象中也会跟着改. 在深拷贝中,原对象与新对象不共享相同的属性,而在浅拷贝中,它们具有相同的属性. 举个栗子:存

  • JS中通过url动态获取图片大小的方法小结(两种方法)

    很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放. 查阅资料,我总结了两种通过url获取图片大小的方法: 1.预加载获取图片大小 var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if

随机推荐