关于javascript: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)