No.3: 防抖与节流？

题目解读

解析防抖与节流，列举场景，代码，没有es6的情况

场景

• 防抖：在搜索输入框中，根据用户输入内容变化动态展示联想搜索词
• 节流：抢票啊、提交数据、切换、轮播和部分Animate动画中，执行完上一次操作后才能再次点击执行对应的函数

防抖

连续调用一个fn时，只有最后一次的调用会被执行

function debounce(fn, delay = 500, immediate = false) {
    let timer;
    return function (...args) {
        if (immediate) {
            if (timer) {
                clearTimeout(timer);
            } else {
                fn.apply(this, ...args)
            }
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, ...args)
            }, delay);
        }
    }
}
function debounce(fn, delay = 500, immediate = false) {
    let timer;
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }
        if (immediate && !timer) {
            fn.apply(this, ...args)
        }
        timer = setTimeout(() => {
            timer = null;
            !immediate && fn.apply(this, ...args)
        }, delay);
    }
}
function debounce(fn, delay = 500, immediate = false) {
    let timer,
        later = function (args) {
            return setTimeout(() => {
                timer = null;
                !immediate && fn.apply(this, args);
            }, delay)
        }
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
            timer = later(args);
        } else {
            timer = later();
            immediate && fn.apply(this, args);
        }
    }
}
// 没有es6怎么办
function debounce(fn, delay = 500, immediate = false) {
    let timer, context, args,
        later = function () {
            return setTimeout(function () {
                timer = null;
                !immediate && fn.apply(context, args);
                context = args = null;
            }, delay)
        }
    return function () {
        context = this;
        args = arguments;
        if (timer) {
            clearTimeout(timer);
            timer = later();
        } else {
            timer = later();
            immediate && fn.apply(this, args);
        }
    }
}

节流

连续调用一个fn时，每隔一段时间调用一次

// 头触发
function throttle(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) {
            return;
        }
        fn.apply(this, args);
        timer = setTimeout(() => {
            timer = null;
        }, delay);
    }
}
// 尾触发
function throttle(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
            timer = null;
        }, delay);
    }
}
// 头尾触发
function throttle(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) {
            return;
        }
        fn.apply(this, args);
        timer = setTimeout(() => {
            fn.apply(this, args);
            timer = null;
        }, delay);
    }
}
// 没有es6
function throttle(fn, delay) {
    let timer, context, args;
    return function (...args) {
          context = this;
        args = arguments;
        if (timer) {
            return;
        }
        fn.apply(this, args);
        timer = setTimeout(function() {
            fn.apply(context, args);
            timer = null;
              context = args = null;
        }, delay);
    }
}