JavaScript 定时器详情

目录
  • 1、简单介绍
  • 2、setInterval
    • 2.1 描述
    • 2.2 参数
    • 2.3 返回值
    • 2.4 用法
  • 3、setTimeout
    • 3.1 描述
    • 3.2 参数
    • 3.3 用法
  • 4、取消timer
  • 5、在控制台使用定时器

1、简单介绍

在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法。
这都是window的对象，调用时可以省略window。这两个方法并不在 JavaScript 的规范中。

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

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

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

2、setInterval

2.1 描述

setInterval() 方法可以按照制定的周期，来重复调用一个函数或执行一个代码段。周期单位为毫秒。
setInterval() 方法如果没有被 clearInterval() 方法关闭或页面关闭，那么会一直调用下去。
setInterval的参数有多个。
第一种，如果第一个参数为代码段，那么setInterval()方法可以选填。
第二种，如果第一个参数为函数，那么setInterval()方法可以有多个参数。

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

2.2 参数

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

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

2.3 返回值

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

2.4 用法

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

<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>

3、setTimeout

3.1 描述

setTimeout()返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
setTimeout()允许我们将函数推迟到一段时间间隔之后再执行。

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

3.2 参数

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

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

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

3.3 用法

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>

4、取消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所设置的定时器。

5、在控制台使用定时器

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

console.time(timerName)

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

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

console.timeEnd(timerName)

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

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

5.1 用法

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

console.time(name);

let num;
for (let index = 0; index < 99999; index++) {
  num++;
}

console.timeEnd(name);

到此这篇关于JavaScript 定时器 详情的文章就介绍到这了,更多相关JavaScript 定时器 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决js中的setInterval清空定时器不管用问题

    使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值. 通过打印定时器的值发现的问题. clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval(). 解决方法:把单独调用的定时器函数去掉. 补充知识:js vue中setTimeout无法通过clea

  • JS定时器如何实现提交成功提示功能

    应用场景: 用户评论后,在合适位置弹出"评论成功",2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 16px">

  • js实现0ms延时定时器的几种方式

    目录 queueMicrotask async/await MessageChannel 最后 附录 这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setTimeout这个函数的探究兴趣,因此在MDN上重新查阅了相关文档,其中提到[最小延时 >=4ms]的一点,因此使用setTimeout不能实现0ms延时的定时器,如果要实现的话,提供了一个参考链接[2]

  • js实现鼠标切换图片（无定时器）

    本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下 实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应图片的标题. 全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

  • js定时器出现第一次延迟的原因及解决方法

    我们在使用js定时器,经常会出现间隔几秒获取一次数据,这是通过setInterval实现的.而且如果setInterval() 参数传递不当,定时器会延迟试行.本文向大家介绍js定时器第一次延迟的原理及实现过程. setInterval() 作用是在播放动画的时,每隔一定时间就调用函数.方法或对象. 语法 setInterval(function(),time); 单位是毫秒 注意:单位是毫秒 定时器第一次延迟执行:采用setInterval实现 var t = setInterval(scro

  • JavaScript定时器实现限时秒杀功能

    JavaScript定时器实现限时秒杀功能

    本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=

  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    利用JS定时器做一个元素做一个有移动效果的方法,实现思路:首先声明一个变量存放元素距离左侧的边距,然后我们在声明一个变量存放每次元素需要移动的距离,然后再给这个方法一个完成时间就可以了.需要注意的是获取到的值如果不是数值型的数据需要装换,否则不能进行判断.再判断一下该元素移动到某个位置之后,步长给它一个负值,该元素就会往回跑了. 大家还可以想一想元素移动到左右侧的时候如何实现转身效果. <!DOCTYPE html> <html> <head> <meta cha

  • JavaScript定时器实现无缝滚动图片

    JavaScript定时器实现无缝滚动图片

    本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下 文本: setInterval 开启间隔型定时器 clearTimeout 关闭定时器 offsetWidth 获取宽度 offsetLeft 获取向左偏移量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝移动<

  • JavaScript 定时器详情

    目录 1.简单介绍 2.setInterval 2.1 描述 2.2 参数 2.3 返回值 2.4 用法 3.setTimeout 3.1 描述 3.2 参数 3.3 用法 4.取消timer 5.在控制台使用定时器 1.简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定时器方法相关方法有四种: 方法 描述

  • JavaScript定时器setTimeout()和setInterval()详解

    本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi

  • javascript 定时器工作原理分析

    javascript 定时器工作原理分析

    setTimeout() MDN对 setTimeout 的定义为: 在指定的延迟时间之后调用一个函数或执行一个代码片段. 语法 setTimeout 的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间.函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout 的参数来取消定时器: var timeoutID = window.setTimeout(code, delay); IE0+ 还支持回调参数的传入: var timeoutID = window.setT

  • javascript定时器完整实例

    本文实例讲述了javascript定时器完整实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&qu

  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方

  • 理解javascript定时器中的setTimeout与setInterval

    理解javascript定时器中的setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,

  • javascript定时器取消定时器及优化方法

    javascript定时器取消定时器及js定时器优化方法 通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: clearInterval(Method); 那么问题来了.用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案如下 var timeout = false; //启动及关闭按钮 function time()

  • 深入探寻javascript定时器

    javascript单线程 JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变. 队列任务 单线程就意味着,所有任务需要排队,

  • 轻松解决JavaScript定时器越走越快的问题

    解决JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,由于没有使用定时器的经验,我一开始是没有清除定时器,程序每一次初始化的时候都调用一次定时器,之前的定时器实例没有被

  • javascript定时器的简单应用示例【控制方块移动】

    javascript定时器的简单应用示例【控制方块移动】

    本文实例讲述了javascript定时器的简单应用.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 定时器的应用</title> <style> #Div1 { width: 100px; height: 100px; positio

随机推荐