JavaScript定时器方法有几种，用法是什么-群英

上一篇：JS事件流的概念怎么理解，事件委托的优点是什么下一篇：jQuery方法属性有哪一些，作用及用法是什么

在实际应用中，我们有时候会遇到“JavaScript定时器方法有几种，用法是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“JavaScript定时器方法有几种，用法是什么”文章能帮助大家解决问题。

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定时器

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。