JavaScript 定时器详情

2022-04-15 0 465
目录
  • 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 定时器 内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript JavaScript 定时器详情 https://www.niceym.com/19331.html