防抖和节流

防抖和节流

防抖和节流的共同点就是合理的减少函数运行的次数；二者都会用到计时器，不同的是防抖是对最后一次事件发生进行计时，而节流是对每一次事件发生导致调用函数后计时

防抖

<div class="login">
<span>账号：</span><input type="text" class="username" />
<span>密码：</span><input type="text" class="password" />
</div>

function test(e) {
    console.log(e.target.value);
}
//debounce返回一个新的函数fn，duration是延迟时间
//防抖是对最后一次事件发生进行计时
function debounce(fn, duration = 500) {
    let timer = null;
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn(...args);
        }, duration);
    };
}
let debouncehandle = debounce(test, 1000);
//oninput和onchange不同在于onchange是在失去焦点后改变
username.oninput = function (e) {
    debouncehandle(e);
};

节流

function throttle(func, duration = 500) {
    let timer = null;
    return function (...args) {
        if (!timer) {
            func(...args);
            timer = setTimeout(() => {
                timer = null
            }, duration);
        }
    };
}
let throttlehandle = throttle(test, 1000);
password.oninput = function (e) {
    throttlehandle(e);
};