前言：前几天在做小程序的时候，碰到一个问题就是通过canvas要搬动canvas画布中的某个图片进行移动，这时候就产生了频繁的setData，就会导致性能出现了一点问题，我们一般比较喜欢的是不进行时时的setData毕竟消耗资源，那么这时候就需要用到节流函数了。

节流函数

说明：节流其实就是减少逻辑触发的频率，实际机制就是利用了计时，在短时时间内不进行频繁触发

const _.throttle = (func, wait) => {
  let timer;

  return () => {
    if (timer) {
      return;
    }

    timer = setTimeout(() => {
      func();
      timer = null;
    }, wait);
  };
};


var throttle = function(func,watduration)

使用：

throttle(function(){console.log(123456)},1000)
throttle(function(){console.log(123456)},1000)
throttle(function(){console.log(123456)},1000)

防抖函数

说明：简单理解就是不管函数在执行了多少次，最终只能执行成功一次就是最后一次。

var timeoutFunc = null;
/**
callbackFunc  回调函数
waitDuration  到计时频率，毫秒级；比如：1000 代表1秒
*/
var antiShakeFunc = function(callbackFunc,waitDuration){
  clearTimeout(timeoutFunc);
  timeoutFunc=setTimeout(function(){
    callbackFunc();
  },waitDuration);
}

使用：

antiShakeFunc(function(){console.log(123456)},2000)
antiShakeFunc(function(){console.log(123456)},2000)
antiShakeFunc(function(){console.log(123456)},2000)
antiShakeFunc(function(){console.log(123456)},2000)
antiShakeFunc(function(){console.log(123456)},2000)
antiShakeFunc(function(){console.log(123456)},2000)
...
只输出最后一条

防止重复提交方案

• 大家都喜欢 利用外部的标记为来防止

var symbol = 0;
var submit = function(){
	if(symbol){
  	return;
  }
  symbol = 1;
  $.post("/xxx/xxx",{},function(res){
  	console.log(res);
  })
}
#方案没有问题

• 建议使用防抖函数来保证只执行一次。当然只是建议，因为有延迟。不过还是有优化方案。

使用场景

• 节流函数
• 动画一类的
• ...

• 防抖函数
• 对值的惟一性，不需要时时修改，但是要保证最后一次和之前是连续的