每天一道前端面试题--throttle与debounce

今天我要和大家分享一下函数节流与函数去抖

案例—拖拽小球

这里我通过mousemove来移动canvas小球的案例来介绍函数节流与函数去

  /*
 ---------------------------
 转化坐标：这个方法很重要
 ---------------------------
 @param point 鼠标的坐标

 @return canvas画布上的坐标
 */
function pointToCanvas(point) {
var box = canvas.getBoundingClientRect();
return {
      x: point.x - box.left,
      y: point.y - box.top
    }
  }

  /*
 ----------------------------
 绘制圆的方法
 ----------------------------
 */
function draw() {
var e = arguments[0];
var point = pointToCanvas({x: e.clientX, y: e.clientY});
    context.clearRect(0,0,canvas.width,canvas.height);
    context.beginPath();
    context.arc(point.x,point.y,20,0,Math.PI * 2, false);
    context.stroke();
    context.fill();
  }

  /*
 ---------------------
 初学者一般会这样写
 --------------------- 
 */
  canvas.addEventListener('mousemove',function(e) {
    draw(e);
  },false);

因为mousemove触发的频率会很高，也会以为这你要花大量的时间去重绘，所以性能堪忧。LOL大家玩过吧，一般FPS60就可以玩这个游戏了，你也可以调到100或者200，那就要看你电脑的性能了，所以这里我们这个小球的移动也是可以调节它的FPS的，这里我们就要用到函数节流了。为了更好的理解函数节流和函数去抖，我研究了一下underscore.js v.1.8.3中的源码，很牛。

throttle–函数节流

通过underscore.js的学习，我实现了一个简单的throttle:

  /*
 函数节流 throttle
 ---------------------------------------------
 减少函数不必要的执行次数。不会重置等待时间。
 ---------------------------------------------
 @param func 需要节流的函数
 @param wait 等待的时间

 @return result
 */
function throttle(func, wait) {
var context, args, result;
//定时器ID
var timeId = null;
//延迟执行函数
var later = function() {
      timeId = null;
      result = func.apply(context, args);
      context = args = null;
    }
return function(){
var now = Date.now();
      context = this;
      args = arguments;
if(!timeId) {
        timeId = setTimeout(later, wait);
      }
return result;
    }
  }

实现小球移动的FPS60

  canvas.addEventListener('mousemove',throttle(draw,1000 / 60),false);

debounce–函数去抖

通过underscore.js的学习，我实现了一个简单的debounce:

  /*
 函数去抖 debounce
 ----------------------------
 一旦触发，便会重置等待时间
 ----------------------------
 @param func 去抖的函数
 @param wait 等待的间隔

 @return result
 */
function debounce(func, wait) {
var context, args, result;
//定时器唯一标识
var timeId = null;

//延迟执行
var later = function() {
      timeId = null;
      result = func.apply(context, args);
      context = args = null;
    }

return function() {
      context = this;
      args = arguments;
if(!timeId) {
        timeId = setTimeout(later, wait);
      }
else {
//重置等待时间
        clearTimeout(timeId);
        timeId = setTimeout(later, wait);
      }

return result;
    }
  }

秒客网