【javascript】防抖节流

一、防抖和节流

防抖：持续触发的时候不执行，不触发后过一段时间执行事件

// 防抖
function debounce(fn) {
    let timeout = null;
    return function () {
        if (timeout !== null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            fn.call(this);
        }, 1000);
    };
}

注意this的指向

优化：

可以向需使用防抖功能的函数中传参数。

function debounce(fun,delay) {
    let timeout;  // 利用闭包，将时间定义在外面
    return function () {
        let context = this;
        let args = arguments; // 便于函数传参
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            fun.apply(context,args);
        },delay)
    }
}

 

节流：一段时间内只调用一次

// 节流
function throttle(fn) {
    let time = true;
    return function () {
        if (!item) {
            return;
        }
        time = false;
        setTimeout(() => {
            fn.call(this);
            time = true;
        }, 1000);
    };
}

优化：

function throttle(func, delay) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) {
            return;
        }
        timeout = setTimeout(() => {
            func.apply(context,args);
            timeout = null;
        }, delay);
    }
}

 

第二种写法：不使用定时器，仅仅是比较现在的时间与上一次使用函数的时间（或是第一次）的差值，如果大于设定时间长度，则需要再次调用函数，若时间仍小于设定时间，则可以继续等待。 

function throttle(func, delay) {
    let pre = 0;
    return function () {
        let now = new Date();
        let context = this;
        let args = arguments;
        if (now - pre > delay) {
            func.apply(context, args);
            pre = now;
        }
    }
}