纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JavaScript的定时器 详解JavaScript的定时器

四冥   2021-11-18 我要评论
想了解详解JavaScript的定时器的相关内容吗,四冥在本文为您仔细讲解JavaScript的定时器 的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript详解,JavaScript定时器,下面大家一起来学习吧。

简单介绍

在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);

总结

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


相关文章

猜您喜欢

  • vue 网页截图 vue 实现网页截图功能详解

    想了解vue 实现网页截图功能详解的相关内容吗,不愿秃头的阳某在本文为您仔细讲解vue 网页截图的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue网页截图,vue截图,下面大家一起来学习吧。..
  • C语言函数基础用法 C语言基础函数用法示例详细解析

    想了解C语言基础函数用法示例详细解析的相关内容吗,RookieStriver在本文为您仔细讲解C语言函数基础用法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言基础,C语言函数详解,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.gamecatcher.cn 【绿色软件园】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式