JavaScript定时器 setTimeout与setInterval 浅析

Posted 2020-10-14 九萌萌

一、 前情提要

　　1）javascript 是运行在单线程的执行环境中的

　　2）由浏览器安排事件的执行顺序

二、setTimeout

　　使用场景： 设定代码在未来的某个时间执行，而执行的时机是不能保证的。

　　工作方式： 在特定的时间过去之后将时间插入执行队列，注意，并不是立即执行

三、重复的定时器 setInterval

　　使用场景： 在设定的时间段内在代码执行队列中插入一段待执行代码

　　注意： 当有定时器中的代码正在执行时，会跳过这次插入

　　缺点：即使跳过了某些间隔代码的执行，在定时器代码执行时间比设定的时间长时，依然会出现代码执行的间隔比预期的小

　　解决方法： 链式调用setTimeout来代替setInterval

setTimeout(function() {
        //处理...
        setTimeout(argument.callee, time)
    }
}, time)

四、 应用场景举例

　　1）JavaScript在浏览器运行中都分配了一个确定数量的资源，代码超过特定时间或特定语句之后就不会执行，如果代码不是同步的，并且可以不立即执行，可以用定时器加数组分块的方法来分块执行，解决上述限制带来的问题

　　2）节流： 一些js语句是消耗非常大的，例如DOM操作，当这样的语句过多时就会导致浏览器崩溃，为了解决上述问题，可以采用setTimeout对该函数进行节流，即规定这些开销比较大的代码不可以在没有间断的情况下连续执行

以窗口大小改变时的节流为例：

function throttle (method, context) {//当第二个函数为空时，就在全局作用域执行该方法
   clearTimeout(method.tid) ;
   method.id = setTimeout (function() ｛
      method.call(context)
  ｝, 100)
}

function resizeProcess = function () {
  //窗口大小改变时真正要执行的代码  
}

window.resize = function () {
   throttle (resizeProcess ) 
}

　　

欢迎交流指正！