JS debounce和throttle 去抖和节流-优快云博客

本文介绍JavaScript中防抖(debounce)与节流(throttle)的技术应用，这两种技术能够有效减少高频事件触发导致的浏览器性能损耗。通过具体示例说明如何使用underscore.js中的debounce和throttle方法来优化用户体验。

JS中的高频事件有scroll recize mouseover。如果频繁触发事件绑定函数，会导致浏览器性能上的损失。

因此我们通常会添加延迟执行的逻辑。

在underscore.js里面有debounce和throttle这两个方法。

throttle创建并返回一个节流阀一样的函数，当重复调用函数的时候，至少每隔wait毫秒调用一次该函数。

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

debounce函数，去抖，是讲延迟函数的执行在函数最后一次调用的wait毫秒之后，比如当窗口停止改变大小之后重新计算布局。

可以这样理解，像弹簧一样，只有你松开压住弹簧的手，弹簧才会向上弹起。

也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

1 var lazyLayout = _.debounce(calculateLayout, 300);
2 $(window).resize(lazyLayout);

View Code

//简单实现一个debonce
var debonce = function(fn,idle){
  var last = null;
  return function() {
    var ctx = this, args = arguments;
    clearTimeout(last);
    last = setTimeout(function(){
      fn.apply(ctx,args);
    },idle)  
  }       
}

转载于:https://www.cnblogs.com/bhaltair/p/6938834.html