执行
window.onscroll = _.debounce(autoLayout,1000)

调用autoLayout的时机:

    function shouldInvoke(time) {
        
        var timeSinceLastCall = time - lastCallTime, //距离上次调用debounce函数的时间
            timeSinceLastInvoke = time - lastInvokeTime;//距离上次调用autoLayout的时间

        // Either this is the first call, activity has stopped and we're at the
        // trailing edge, the system time has gone backwards and we're treating
        // it as the trailing edge, or we've hit the `maxWait` limit.
        return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
        
          (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
      }
      

简易实现:

function debounce(callback,interval) {
        var lastTime = undefined;
        var timer = undefined;
        return function(){
            var now = Date.now();
            
            if(timer){
                clearTimeout(timer);
            }
            
            if(lastTime === undefined){
                callback.apply(this,arguments);
                lastTime = now;
            }else if(now - lastTime < interval){
                lastTime = now;
                
                var that = this;
                var _arguments = arguments;
                timer = setTimeout(function(){
                    callback.apply(that,_arguments);
                    // lastTime = undefined;
                },interval)
                
            }else{
                callback.apply(this,arguments);
                lastTime = now;
            }
        }
    }
%E6%89%A7%E8%A1%8C%0A%60window.onscroll%20%3D%20_.debounce(autoLayout%2C1000)%60%0A%0A%E8%B0%83%E7%94%A8autoLayout%E7%9A%84%E6%97%B6%E6%9C%BA%EF%BC%9A%0A%60%60%60javascript%0A%20%20%20%20function%20shouldInvoke(time)%20%7B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20timeSinceLastCall%20%3D%20time%20-%20lastCallTime%2C%20%2F%2F%E8%B7%9D%E7%A6%BB%E4%B8%8A%E6%AC%A1%E8%B0%83%E7%94%A8debounce%E5%87%BD%E6%95%B0%E7%9A%84%E6%97%B6%E9%97%B4%0A%20%20%20%20%20%20%20%20%20%20%20%20timeSinceLastInvoke%20%3D%20time%20-%20lastInvokeTime%3B%2F%2F%E8%B7%9D%E7%A6%BB%E4%B8%8A%E6%AC%A1%E8%B0%83%E7%94%A8autoLayout%E7%9A%84%E6%97%B6%E9%97%B4%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Either%20this%20is%20the%20first%20call%2C%20activity%20has%20stopped%20and%20we're%20at%20the%0A%20%20%20%20%20%20%20%20%2F%2F%20trailing%20edge%2C%20the%20system%20time%20has%20gone%20backwards%20and%20we're%20treating%0A%20%20%20%20%20%20%20%20%2F%2F%20it%20as%20the%20trailing%20edge%2C%20or%20we've%20hit%20the%20%60maxWait%60%20limit.%0A%20%20%20%20%20%20%20%20return%20(lastCallTime%20%3D%3D%3D%20undefined%20%7C%7C%20(timeSinceLastCall%20%3E%3D%20wait)%20%7C%7C%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20(timeSinceLastCall%20%3C%200)%20%7C%7C%20(maxing%20%26%26%20timeSinceLastInvoke%20%3E%3D%20maxWait))%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%0A%60%60%60%0A%0A%0A%E7%AE%80%E6%98%93%E5%AE%9E%E7%8E%B0%EF%BC%9A%0A%60%60%60javascript%0Afunction%20debounce(callback%2Cinterval)%20%7B%0A%20%20%20%20%20%20%20%20var%20lastTime%20%3D%20undefined%3B%0A%20%20%20%20%20%20%20%20var%20timer%20%3D%20undefined%3B%0A%20%20%20%20%20%20%20%20return%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20now%20%3D%20Date.now()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20if(timer)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearTimeout(timer)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20if(lastTime%20%3D%3D%3D%20undefined)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20callback.apply(this%2Carguments)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastTime%20%3D%20now%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%20if(now%20-%20lastTime%20%3C%20interval)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastTime%20%3D%20now%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20that%20%3D%20this%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20_arguments%20%3D%20arguments%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20timer%20%3D%20setTimeout(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20callback.apply(that%2C_arguments)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20lastTime%20%3D%20undefined%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2Cinterval)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20callback.apply(this%2Carguments)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastTime%20%3D%20now%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%60%60%60%0A

debounce/throttle

2019-02-16 14:39:12 0 21
这里是评论

相关推荐