函数节流与防抖(参考lodash)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34893429/article/details/78058115
function debounce(fn, delay, immediate){
    var timeout,
        args,
        context,
        timestamp,
        result;
    var later = function(){
        var last = Date.now() - timestamp;

        if(last < delay && last >= 0){
            timeout = setTimeout(later, delay - last);
        }else{
            timeout = null;
            if(!immediate){
                result = fn.apply(context, args);

                if(!timeout){
                    context = args = null;
                }
            }
        }
    };

    return function(){
        context = this;
        args = arguments;
        timestamp = Date.now();
        console.log(timestamp);
        var callNow = immediate && !timeout;
        if(!timeout){
            timeout = setTimeout(later, delay);
        }
        if(callNow){
            result = fn.apply(context, args);
            context = args = null;
        }
        return result
    }
};
function throttle(method , duration ,delay ){
    var timer = null, 
        // 记录下开始执行函数的时间
        begin = new Date();

    return function(){
        var context = this, 
            args = arguments, 
            // 记录下当前时间
            current = new Date();
        // 函数节流里的思路
        clearTimeout(timer);

        // 记录下的两个时间相减再与duration进行比较
        if(current-begin >= duration){
             method.apply(context , args);
             begin = current;
        }else{  
            timer = setTimeout(function(){
                method.apply(context , args);
            } , delay);
        }
    }
}
window.onresize = throttle(function(){console.log('resize')},1000,500)
展开阅读全文

没有更多推荐了,返回首页