JavaScript定时器怎么在控制台中使用

今天小编给大家分享一下JavaScript定时器怎么在控制台中使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

寿阳网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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

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

    点我每秒钟数字加一

    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() 是根据指定的时间周期性执行。

    点击后,等待一秒钟数字加一

    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定时器怎么在控制台中使用
    链接URL:http://ybzwz.com/article/gidieh.html