节流和防抖函数及防止用户重复提交

前言：前几天在做小程序的时候，碰到一个问题就是通过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(),1000)

throttle(function(),1000)

throttle(function(),1000)

防抖函数

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

var timeoutFunc = null;

/**

callbackFunc 回调函数

waitDuration 到计时频率，毫秒级；比如：1000 代表1秒

*/

var antiShakeFunc = function(callbackFunc,waitDuration){

clearTimeout(timeoutFunc);

timeoutFunc=setTimeout(function(){

callbackFunc();

},waitDuration);

}

使用：

antiShakeFunc(function(),2000)

antiShakeFunc(function(),2000)

antiShakeFunc(function(),2000)

antiShakeFunc(function(),2000)

antiShakeFunc(function(),2000)

antiShakeFunc(function(),2000)

...

只输出最后一条

防止重复提交方案

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

var symbol = 0;

var submit = function(){

if(symbol){

return;

}

symbol = 1;

$.post("/xxx/xxx",{},function(res){

console.log(res);

})

}

#方案没有问题

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

使用场景

节流函数

动画一类的

...

防抖函数

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