在实际开发中，我们经常会遇到一类需求：根据input输入容来校验或者搜索数据，根据窗口的大小变化来进行相关操作等。如果事件操作函数跟用户的操作保持实时同步，那么当用户的操作十分频繁时，就会多出许多无用的事件操作，并加重浏览器的负担，影响页面的性能。这时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。可能比较抽象，这里写个简易的防抖函数：

// 函数防抖function debounce (fn, wait) {    var tiemout = null;    return function () {        if (tiemout !== null) {            clearTimeout(tiemout);        }        tiemout = setTimeout(fn, wait);    }}// 事件处理函数function print() {    console.log('变化');}window.addEventListener('resize', debounce(print, 1000));复制代码

页面监听resize事件，当事件频繁触发时，事件处理函数并没有执行。当事件停止触发后的1秒，执行print函数。

节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。就好比人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。实现函数节流主要有两种方式：时间戳与定时器。这里两种方式都简单写一下，其实原理是相同的：

// 函数防抖(时间戳)function throttleOne (fn, delay) {    var preDate = Date.now();    return function () {        var now = Date.now();        if (now - preDate >= delay) {            fn();            preDate = Date.now();        }    }}// 函数防抖(定时器)function throttleTwo (fn, delay) {    var tiemout = null;    return function () {        if (!tiemout) {            tiemout = setTimeout(function () {                fn();                tiemout = null;            }, delay);        }    }}复制代码

上面的写的方法都比较简易，只是实现了基本的功能，实际开发中需根据要求进行相关的更改。匆匆的总结了一波，写的很简单(懒)，有时间再补充吧0.0