实现防抖函数

      //实现防抖函数
    //   防抖函数原理，在事件被触发n秒后在执行回调，如果在这个n秒内又被触发，则重新计时。

    // 适用场景：
    //     按钮提交场景：防止多次提交按钮，只执行最后提交的一次
    //     服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

    //防抖函数
    const debounce  = (fn , delay) => {
        let timer = null;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this,args);
            },delay)
        }
    }

版本2

非立即执行版

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        
        if(timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        })
    }
}


调用
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    正常调用
    content.onmousemove = count;
    防抖调用
    content.onmousemove = debounce(count,1000);

版本3

立即执行版

function debounce(func,wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        
        if(timeout) clearTimeout(timeout);
        
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        },wait)
        
        if(callNow) func.apply(context, args)
    }
}

版本4 包含立即执行和非立即执行的防抖

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;

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

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

扫码加群