详解JavaScript的定时器

目录
  • 简单介绍
  • setInterval
    • 描述
    • 参数
    • 返回值
    • 用法
  • setTimeout
    • 描述
    • 参数
    • 用法:
  • 取消timer
  • 在控制台使用定时器
    • console.time(timerName)
    • console.timeEnd(timerName)
    • 用法
  • 总结

简单介绍

在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法。

这都是window的对象,调用时可以省略window。这两个方法并不在 JavaScript 的规范中。

定时器方法相关方法有四种。

方法 描述
setInterval 周期性地调用一个函数(function)或者执行一段代码。
clearInterval 取消掉用setInterval设置的重复执行动作。
setTimeout 在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。

setTimeout() setInterval()的区别是它们的执行次数不同。

注意:setTimeout() 只执行一次setInterval()是每间隔给定的时间周期性执行。

setInterval

描述

setInterval() 方法可以按照制定的周期,来重复调用一个函数或执行一个代码段。周期单位为毫秒。

setInterval() 方法如果没有被 clearInterval() 方法关闭或页面关闭,那么会一直调用下去。

setInterval的参数有多个。

第一种,如果第一个参数为代码段,那么setInterval()方法可以选填。

第二种,如果第一个参数为函数,那么setInterval()方法可以有多个参数。

let timerId = setInterval(func|code, delay, arg1, arg2, ...)

参数

参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间,单位为毫秒,可以不填,默认值是 0
arg1,arg2… 选填 要传入被执行函数(或代码字符串)的参数列表(IE9 以下不支持)

参数func|code 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。

返回值

返回值timeoutID是一个正整数,表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。

用法

这是一个点击按钮,每隔一秒种,数字加一的示例;

<p id="showNum"></p>
<button onclick="timer()">点我每秒钟数字加一</button>
 <script>
  const showNum = document.getElementById("showNum");
   let timerId; // 计时器的ID
  let num = 0;
   function timer() {
    timerId = setInterval(addNum, 1000);
  }
   function addNum() {
    showNum.innerText = `${num++}`;
  }
   // 没有写停止计时器代码
</script>

setTimeout

描述

setTimeout()返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

setTimeout()允许我们将函数推迟到一段时间间隔之后再执行。

let timerId = setTimeout(func|code, delay, arg1, arg2, ...)

参数

setTimeout()参数这里和setInterval()的参数是一样的。

参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间,单位为毫秒,可以不填,默认值是 0
arg1,arg2… 选填 要传入被执行函数(或代码字符串)的参数列表(IE9 以下不支持)

参数func|code 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。

用法:

setTimeout()用法和 setInterval()是一样的,
不过 setTimeout() 只执行一次不同,setInterval() 是根据指定的时间周期性执行。

<p id="showNum"></p>
<button onclick="timer()">点击后,等待一秒钟数字加一</button>
 <script>
  const showNum = document.getElementById("showNum");
   let timerId;
  let num = 0;
  addNum();
   function timer() {
    timerId = setTimeout(addNum, 1000);
  }
   function addNum() {
    showNum.innerText = `${num++}`;
  }
 </script>

取消timer

clearInterval() 方法可取消由 setInterval() 设置的 timer。

clearTimeout() 方法可取消由 setTimeout() 设置的 timer。

使用方法很简单,只有一个参数,该参数timeoutID为您要取消定时器的标识符。
该ID由相应的setTimeout()或clearTimeout()调用返回.

clearInterval(intervalID);
clearTimeout(timeoutID);

注意的是setTimeout()setInterval()共用一个编号池,技术上,clearTimeout()和 clearInterval() 可以互换。但是,为了避免混淆,不要混用取消定时函数。

用法很简单

function timer() {
  timerId = setTimeout(addNum, 1000);
}
 clearTimeout(timerId); // 当代码运行到这行的时候,会取消timer所设置的定时器。

在控制台使用定时器

在浏览器控制台中也可以使用定时器

console.time(timerName)

创建一个名为name的计时器,并开始计时。

每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。

console.timeEnd(timerName)

调用console.timeEnd(name)停止计时器并输出所耗时间(毫秒)。

console.time(timerName);
console.timeEnd(timerName);

用法

for循环99999次要多少时间示例.

console.time(name);
 let num;
for (let index = 0; index < 99999; index++) {
  num++;
}
 console.timeEnd(name);

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-16

JavaScript定时器设置、使用与倒计时案例详解

本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器 定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设置定时器 setTimeout(function,delay);//设置延时多少毫秒执行该函数,只执行一次,返回值是一个id setInterval(function,delay);//设置间隔多少毫米一直执行该函数,执行多次,返回值是一个id 两者的区别就在于setTimeout方式只执行一次,而

详解javascript高级定时器

setTimeout()和setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了.这里主要介绍一下javascript的代码队列.在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行.所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待.如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了.所以就会产生一些问题. 重复定时器 通常,我们使用set

JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础 基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea

JavaScript定时器使用方法详解

本文实例为大家分享了JavaScript定时器使用的具体代码,供大家参考,具体内容如下 定时器分类 1.循环执行:一段程序能够每间隔一段时间执行一次[setInterval()][clearInterval()] 2.定时执行(一次定时器):某一段程序需要在延迟多少时间后执行[setTimeout()][clearTimeout()] 定时器使用 使用注意:为了防止定时器累加,使用定时器要先清除后设置:要保证内存中只有一个定时器. 1.循环执行:一段程序能够每间隔一段时间执行一次 设置定时器:[

JS定时器使用,定时定点,固定时刻,循环执行详解

本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法.比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法. JavaScript中有两个定时器方法:setTimeout()和setInterval(). 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,或者函数名,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后

JS实现简单的选择题测评系统代码思路详解(demo)

包含内容:JS封装表单,JS校验表单 说是测评系统,感觉只能算是一个小小的Demo,很水,,没有数据库库,,仅使用JS做简单的选择题测评系统 -------------------------------------------------------------------------------- 一.设计思路 表单封装: [1]由于采用JS封装提交所以,不需要form标签 [2]放置多个input标签,作为输入项 [3]编写JS获取输入项,并通过get方式提交到另一个页面 校验表单(显示结

JS图片轮播与索引变色功能实例详解

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

基于js 各种排序方法和sort方法的区别(详解)

今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

JS合并两个数组的3种方法详解

这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: 1.concat js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果. var c = a.concat(b); //c=[1,2,3,4,5,6]

JS处理数据四舍五入(tofixed与round的区别详解)

1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义

JS中的Replace()传入函数时的用法详解

replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串.. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,func

js单页hash路由原理与应用实战详解

本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下: 什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能做在一个页面内. 那所谓的单页路由应用就是:在一个页面内,通过切换地址栏的URL来实现切换内容的变化. 如何知道URL切换了呢? 当url后面的锚文本发生变化时, 会触发onhashchange事件.通过这个事件,我们就可以对不同的URL 做出不同的处理.锚

js判断是否为空和typeof的用法(详解)

(1)typeof用法 typeof的运算数未定义,返回的就是 "undefined". 运算数为数字 typeof(x) = "number" 字符串 typeof(x) = "string" 布尔值 typeof(x) = "boolean" 对象,数组和null typeof(x) = "object" 函数 typeof(x) = "function" (2)js判断是否为空 v

在js里怎么实现Xcode里的callFuncN方法(详解)

本人使用的WebStorm编辑器,里面没有callFuncN, 不记得Lua是否支持callFuncN,如果不支持相信应该能用同样的方法做到. 废话不多说,贴代码: loadDown : function () { var dis = this.left_move.getPositionY() - this.left.getPositionY(); // 得到一个距离 var act1 = new cc.moveBy(0.5,cc.p(0,-dis)); var act2 = cc.callFu