相信对很多在千锋长沙IT培训的小伙伴来说面试是个不小的问题，但是千锋长沙的老师们都有给大家准备长沙IT培训程序员面试题，下面给大家说一下函数防抖节流：

        在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

        举例：工作中的话像我们有的项目中会有页面懒加载、下拉刷新等效果。那么问题来了~ 在用户网慢或者手机卡顿的时候，怎样阻止客户重复请求数据呢？这时候就需要我们的防抖和节流...

        先简单说下什么是防抖和节流：

        函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。简单来说防抖就是：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

防抖函数分为非立即执行版和立即执行版。
underscorejs.org js类库（提供很多项目中）

代码实现：

/*
*
* 函数的防抖（debounce）：不是某个事件触发就去执行函数，而是在指定的时间间隔内，
* 执行一次，减少函数执行的次数
* */

/*
* debounce：函数防抖
* @params
* func：要执行的函数
* wait：间隔等待时间
* immediate：在开始边界还是结束边界触发执行(true=>开始边界)
* @return
* 可被调用的函数
* */
function debounce(func, wait, immediate) {
let result = null,
timeout = null;
return function (...args) {
let context = this,
now = immediate && !timeout;
clearTimeout(timeout); //=> 重要：在设置新的定时器之前，我们要把之前设置的定时器都干掉，因为防抖
的目的是等待时间内，只执行一次
timeout = setTimeout(() => {
timeout = null;
if (!immediate) result = func.call(context, ...args);
}, wait);
if (now) result = func.call(context, ...args);
return result;
}
}

        复制代码函数节流（throttle）：当持续触发事件时，一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

        所谓节流就是：指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。代码实现：

/*
* 函数的节流（throttle）：为了缩减执行的频率，但不像防抖一样，一定时间内只能执行一次，
* 而是一定时间内能执行多次
*
**/

/*
* throttle：函数节流是为了缩减执行频率，当达到了一定的时间间隔就会执行一次
* @params
* func：需要执行的函数
* wait：设置的间隔时间
* @return
* 返回可被调用的函数
* */
let throttle = function (func, wait) {
let timeout = null,
result = null;
previous = 0; //=> 上次执行的时间点
return function (...args) {
let now = new Date,
context = this;
//=> remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间间隔
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};

};

        复制代码区别：函数节流不管事件触发有多频繁，都会在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

        本套学习内容由千锋长沙IT培训班韦老师撰写，版权归千锋教育所有，欢迎转载，转载请注明作者出处。谢谢！