JS-定时器的4种写法及介绍，前端组件开发

码农世界 2024-05-24 前端 70 次浏览 0个评论

// 输出一次 timeout，每隔1S输出一次 interval

/--------------------------------/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？

var callback = function () {

if (times++ > max) {

clearTimeout(timeoutId);

clearInterval(intervalId);

}

console.log(‘start’, Date.now() - start);

for (var i = 0; i < 990000000; i++) {}

console.log(‘end’, Date.now() - start);

delay = 100,

times = 0,

max = 5,

start = Date.now(),

intervalId, timeoutId;

function imitateInterval(fn, delay) {

timeoutId = setTimeout(function () {

fn();

if (times <= max) {

imitateInterval(fn ,delay);

}

}, delay);

}

imitateInterval(callback, delay);

intervalId = setInterval(callback, delay);

如果是setTimeout和setInterval的话，它俩仅仅在执行次数上有区别，setTimeout一次、setIntervaln次。而通过setTimeout模拟的setInterval与setInterval的区别则在于：setTimeout只有在回调完成之后才会去调用下一次定时器，而setInterval则不管回调函数的执行情况，当到达规定时间就会在事件队列中插入一个执行回调的事件，所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响？

setTimeout(func, 0) 和 setImmediate(func)谁更快？(仅仅是好奇，才写的这段测试)
console.time(‘immediate’);
console.time(‘timeout’);

setImmediate(() => {
console.timeEnd(‘immediate’);
});

setTimeout(() => {
console.timeEnd(‘timeout’);
}, 0);

在Node.JS v6.7.0中测试发现setTimeout更早执行
- 面试题
  下面代码运行后的结果是什么？
  
  // 题目一
  var t = true;
  
  setTimeout(function(){
  t = false;
  }, 1000);
  
  while(t){}
  
  alert(‘end’);
  
  /--------------------------------/
  
  // 题目二
  for (var i = 0; i < 5; i++) {
  setTimeout(function () {
  console.log(i);
  }, 0);
  }
  
  /--------------------------------/
  
  // 题目三
  var obj = {
  msg: ‘obj’,
  shout: function () {
  alert(this.msg);
  },
  waitAndShout: function() {
  setTimeout(function () {
  this.shout();
  }, 0);
  }
  };
  obj.waitAndShout();
  
  问题答案会在后面解答
  
  三、JS定时器的工作原理
  
  在解释上面问题的答案之前我们先来了解一下定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。
  
  上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：
  - 程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
  - 第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
  - 当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
  - 在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
  - 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行
    这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。
    
    四、题目答案
    
    好啦，我们现在再来看看上面的面试题的答案。第一题
    
    alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会
    
    第二题
    
    代码会输出 5 5 5 5 5，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前JS代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5
    
    第三题
    
    这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:
    
    var obj = {
    msg: ‘obj’,
    shout: function () {
    alert(this.msg);
    },
    waitAndShout: function() {
    var self = this; // 这里将this赋给一个变量
    setTimeout(function () {
    self.shout();
    }, 0);
    }
    };
    obj.waitAndShout();
    
    五、需要注意的点
    - setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同
    - 因为JS引擎只有一个线程，所以它将会强制异步事件排队执行
    - 如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行
    - this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决
      自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
      
      深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
      
      因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
      
      既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
      
      由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
      
      如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
      
      最后：
      
      总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
      
      面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
      
      点击这里领取Web前端开发经典面试题
      
      找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
      
      点击这里领取Web前端开发经典面试题