函数的防抖和节流
- 在进行窗口的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 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
简单理解下~没什么花里胡哨的东西 欢迎tucao 谢谢！
