函数防抖、函数节流

1.定义：

　　函数防抖：触发事件后wait时间内函数只执行一次，如果在wait时间内又触发了事件，则会重新计算函数执行时间

//函数防抖
let timer
function debounce(fn,wait) { 
　　clearTimeout(timer);
　　timer = setTimeout(() => {
　　　　fn();
　　}, wait);
}

　　函数节流：限制函数在一定时间内只能执行一次

//函数节流
let timer;
function throttle(fn,wait) {
　　if (timer) {
　　　　return;
　　}
　　timer = setTimeout(() => {
　　　　fn();
　　　　timer = null;
　　}, wait);
}

 

2.解析：

　　乍一看节流和防抖的定义并不好理解和区分，我这里类比两个生活中的例子：

　　函数防抖：类似于乘坐电梯，电梯门假设3秒后会自动关闭，关门可以看做要执行的函数，3s是等待时间，但是如果在3s这段时间内有人要上电梯，点了开门，那么就会重新计算时间，在这次点击开门3s后门自动关闭。

　　函数节流：类似于公交车，从始发站公交车10分钟发一趟车，在10分钟这段时间内，只会发这一趟车。

3.实例：

　　写了个简单的例子，将防抖函数和节流函数采用闭包的形式封装作为公共方法。

//函数防抖
function debounce() { 
    let timer = null;
    return function (fn,wait) { 
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        }, wait);
    }
}

//函数节流
function throttle() {
    let timer = null;
    return function (fn,wait) { 
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn();
            timer = null;
        }, wait);
    }
}

　　页面中有需要时，传参并调用。

    <input id="inputId" onkeyup="debounceFn(inputSay,1000)" placeholder="函数防抖"/>

    <button onclick="throttleFn(btnSay, 1000)">函数节流</button>

var debounceFn = debounce();
var throttleFn = throttle();

function inputSay() { 
    console.log(document.getElementById('inputId').value);
}

function btnSay() { 
    console.log('函数节流');
}