JavaScript小知识点（二）：函数防抖和节流

函数防抖

函数防抖就是让某个函数满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。例如监听滚动无限加载时，如果没有对请求函数进行防抖控制，用户拉到底部时会多次触发请求函数。进行防抖控制后，只有用户拉到底部并且在规定的事件内不再滚动才会触发请求函数。

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
	        // 不改变this和event参数
            func.apply(context, args)
        }, wait);
    }
}
div.onmouseover = debounce(someFunc, 1000)

如果希望在进行防抖控制前先让函数执行一次

function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}
div.onmouseover = debounce(someFunc, 1000, true)

函数节流

如果需要持续触发事件，每隔一段时间，只执行一次事件，那就需要对函数进行节流

function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}
div.onmousemove = throttle(someFunc, 1000);

写在最后

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。