定时器：基本认知

2024年1月26日 221次阅读 来源: 小喵不吃鱼

定时器

定时器观点

  • 是递次按指定的时候距离（反复）自动的实行一项使命

  • 定时器要领属于window对象
    假如在该要领中运用this，this的值在非严厉形式下返回的是window对象，在严厉形式下返回的是undefined。

  • 分为一次性定时器和周期性定时器

一次性定时器

setTimeout()，吸收两个参数：要实行的代码和以毫秒示意的时候，只在守候时候抵达后实行一次

  • 第一个参数可所以一段包括JavaScript代码的字符串（和运用eval()要领的字符串雷同），也可所以一个函数，发起运用函数作为参数

  • 第二个参数示意守候时候，但须要特别注重的是，经由该段时候后，代码不一定实行。（定时器实行递次会致使一些问题）

setTimeout(function(){
    alert(‘hello world’);
},100);
//或许
setTimeout(“alert(‘hello world’)”,100);

  • 消灭一次性定时器：
    setTimeout()要领每次被挪用都邑返回一个新的数值，一连不反复,作为该要领的唯一标识符，假如须要作废一次性定时器，能够在实行前设置clearTimeout()。

var timeoutId=setTimeout(function(){alert(‘hello world’)},1000);
clearTimeout(timeoutId);//在未挪用之前消灭了定时器

只要在指定的时候之前设置clearTimeout()就能够让一次性定时器不实行。因为一次性定时器只实行一次，所以确认须要挪用时，不须要去消灭。

周期性定时器

setInterval()，吸收的参数范例和一次性定时器雷同，根据指定的时候距离（第二个参数）去反复实行代码，直到该定时器被作废或页面被卸载。

  • 消灭周期性定时器

var i=0;
var timerID=setInterval(function(){
    console.log(i);
    i+=1;
    if (i>10){clearInterval(timerID)}
},100);

同一次性定时器雷同，都邑返回一个唯一标识符，在该定时器未住手之前，这个唯一标识符是稳定的，下次被从新挪用，会返回另一个差别的数值。在到达消灭前提时，设置clearInterval()，因为周期性定时器会一向实行下去，所以必需设置消灭。

定时器与挪用行列

浏览器是多线程递次，可同时实行多个使命，但，JavaScript是一个单线程的诠释器，一个时候只能实行一项使命。
为了掌握要实行的代码，就有一个JavaScript使命行列，这些使命会按它们添加到行列的递次实行，定时器的使命函数会在前面代码实行完以后才实行，所以会存在守候时候凌驾设定的时候的状况。

例子

for(var i=0;i<3;i++){
    setTimeout("console.log(i)",0);
}
    //3,3,3

在掌握台中输入以上代码，会输出三个3，原因是当浏览器读到定时器时，只是把使命函数加入了回调行列，但必需在主递次（for轮回）实行完后才会实行，而主递次实行完后，i的值为3，然后挪用已经在使命行列中守候的三个定时器使命函数，则都输出雷同的3。

一次性定时器和周期性定时器的比较

一次性定时器模仿周期性定时器

var i=0
setTimeout(function(){
    if (i<10){                           //设置使命函数实行前提
        console.log(i);
        i+=1;
        setTimeout(arguments.callee,100);//链式挪用一次性定时器
    }
},100)

  • 运用一次性定时器时，没必要跟踪定时器ID，因为每次实行代码后，假如不再设置另一次挪用，定时器就会自动住手。

  • 因为一次性定时器是在当前使命函数实行完以后，才最先实行下一次定时器函数，所以定时器中所设置的距离时候是从当前使命函数实行完以后最先盘算的，这一点和周期性定时器差别。

周期性定时器模仿一次性定时器

var timerID=setInterval(function(){
    alert('hello world');
    clearInterval(timerID);
},100);

  • 必需设置定时器消灭，不然周期性定时器会一向实行下去。

  • 周期性定时器中的时候距离是指每隔某段时候就挪用一次，而不论每次实行使命函数消费多长时候，假如使命函数实行时候凌驾了设定的时候距离，就会发作毛病。

总结

  • 运用定时器时优先选用一次性定时器，链式挪用setTimeout来完成周期性定时器的结果。

  • 注重定时器的使命函数添加进使命行列和实行递次。

    原文作者：小喵不吃鱼
    原文地址: https://segmentfault.com/a/1190000005859541
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞