说说前端的防抖和节流以及最简单的实现

防抖和节流在前端是很常见的知识点，并且也是常见的面试题。 

00 背景

防抖和节流在前端中是应用很常见的，特别是在 PC 端页面的开发中。 

01 节流

简单说几个场景，监听滚动事件和鼠标移动事件。这两个事件是触发比较非常频繁，一次鼠标移动触发上百次的 mousemove. 

这时必须用节流函数。 规定在一定的时间内触发一次。 

如何理解节流函数，throttle 接收两个参数，一个要执行的函数，一个是一定的时间内。 

function throttle(fn, interval = 300) {

    let canRun = true;

    return function () {

        if (!canRun) return;

        canRun = false;

        setTimeout(() => {

            fn.apply(this, arguments);

            canRun = true;

        }, interval);

    };

}

02 防抖

function debounce(fn, interval = 300) {

    let timeout = null;

    return function () {

        clearTimeout(timeout);

        timeout = setTimeout(() => {

            fn.apply(this, arguments);

        }, interval);

    };

}