您的位置：首页 > 编程技术 > js  >  JavaScript 定时器详情

JavaScript 定时器详情

 更新时间：2021年11月10日 09:42  点击：2389 作者：四冥

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 定时器 内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://www.cnblogs.com/gssg/p/15525378.html

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31

  • C#和JavaScript实现交互的方法

    最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31

  • JavaScript中的this关键字使用方法总结

    在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15

  • 详解javascript数组去重问题

    首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，我写出了如下代码A： Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08

  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07

  • Javascript类型转换的规则实例解析

    这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27

  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07

  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23

  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24

  • JavaScript预解析,对象详解

    这篇文章主要介绍了JavaScript预解析,对象的的相关资料，小编觉得这篇文章写的还不错，需要的朋友可以参考下，希望能够给你带来帮助...2021-11-10

  • 学习JavaScript设计模式之装饰者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24

  • javascript设计模式之解释器模式详解

    神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07

  • JavaScript学习笔记整理_setTimeout的应用

    下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-03

  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30

  • javascript实现tab切换的四种方法

    tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08

  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30