js 实现防抖与节流

防抖和节流

防抖和节流其实都是为了规避频繁触发回调导致大量计算,从而影响页面发生抖动甚至卡顿, 简单来说就是将多从回调, 比如ajax调用或者页面点击变为一次.
防抖和节流的区别在于以第一次为准还是以最后一次为准

节流throttle

在一段时间内, 无论触发多次, 都以第一次为准, 比如 输入框补全提示,只需要没两秒补全一次
主要思路是通过时间戳判断, 每次调用判断和上一次调用时间差异确定是否需要重新调用

const throttle = (fn, delay) => {
    // 定义上次触发时间
    let last = 0;
    return (...args) => {
        const now = + Date.now();
        if (now > last + delay) {
            fn.apply(this, args);
        }
    }
}

let num = 1;
let content = document.getElementById('content');
function count () {
    content.innerHTML = num++;
}
content.onmousemove = throttle(count, 1000)

防抖debounce

使用定时器执行函数, 新调用发生时如果旧调用没有执行就清除之前的定时器

const debounce = (fn, delay) => {
    let timmer;
    return (...args) => {
        if (timmer) {
            clearnTimeout(timmer)
        }
        timmer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }   
}
let num = 1;
let content = document.getElementById('content');
function count () {
    content.innerHTML = num++;
}
content.onmousemove = debounce(count, 1000)