函数防抖函数节流

事件频繁被触发,频繁执行DOM操作、资源加载等重复行为,导致UI停顿甚至浏览器崩溃。

函数节流和函数防抖用于限制函数的执行。是优化高频率执行js代码的一种手段。

函数防抖

函数防抖就是让某个函数在上一次执行后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发此函数,等待时间会重新计算。

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后,才执行该动作,若在这n毫秒内又调用该动作,则将重新计算执行时间。

var debounce = function(idle,action){
  var last;
  return function(){
    var ctx = this,
        args = arguments;
    clearTimeout(last);
    last = setTimeout(function(){
      action.apply(ctx,args);
    },idle);
  }
}

返回函数连续调用时,空闲时间必须大于或等于idle,action才会执行。

函数节流

每隔某个时间去执行某函数,避免函数的过多执行。

如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是说会先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

var throttle = function(delay,action){
  var last ;
  return function(){
    var cur = +new Date();  //返回毫秒数
    if(cur - last > delay){
      action.apply(this,arguments);
      last = cur;
    }
  }
}

Table of Contents