[JS][性能优化]函数防抖、函数节流、标识变量(开关)

• 函数防抖

该函数接收三个参数，分别为要执行的函数，隔多长时间清除函数定时器以及多长时间需要执行一次。 函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。在等待时间内触发此函数，则重新计算等待时间。

var debounce　 = function(fn,delay,mustRunDelay){
    var timer = null;
    var t_start;
    return function(){
        var context = this;
        var args = arguments;
        var t_curr = +new Date();
        clearTimeout(timer);
        if(!t_start){
            t_start = t_curr;
        }
        if(t_curr - t_start >= mustRunDelay) {
            fn.apply(context,args);
            t_start = t_curr
        } else {
            timer = setTimeout(function(){
                fn.apply(context,args);
            },delay);
        }
    } 
}

• 函数节流

函数分流的思想就是计时，上面的代码是只有在操作结束后才执行，只需要在上面的代码上加一个计时判断，如果超过了设定的时间，就执行一次处理函数，就达到了分流的效果。

function throttle(method, delay, mustRunDelay) {
    var timer = null, args = arguments;
    var start = 0, now = 0;
    return function () {
        var context = this;
        now= Date.now();
        if(!start){
            start = now;
        }
        if(now - start >= mustRunDelay){
            method.apply(context, args);
            start = Date.now();
        }else {
            clearTimeout(timer);
            timer = setTimeout(function () {
                method.apply(context, args);
            }, delay);
        }
    }
}
obj.onmousemove = throttle(myFun, 50, 500);

• 标识变量(开关)

let flag=true;
let btn = document.getElementById('test');
btn.onlick = function(){
  if(flag){
    flag=false
  }else{
    flag=true  
  }
}