防抖与节流方案_【Javascript】节流和防抖函数及防止用户重复提交

前言：前几天在做小程序的时候，碰到一个问题就是通过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);  })}#方案没有问题

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

使用场景

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

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