函数防抖和函数节流

函数防抖和函数节流

函数防抖和函数节流：是优化高频率执行的JavaScript代码的一种手段。常用于JavaScript中的一些事件，如浏览器的resize、scroll，鼠标的mousemove、mouseover，键盘的keypress等。例如input输入框的keypress事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，就需要对这类事件进行调用次数的限制。

函数防抖(debounce)

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版:

非立即执行版:

//非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。function debounce(func, wait) {let timeout;return function () {let context = this;let args = arguments;if (timeout) clearTimeout(timeout);timeout = setTimeout(() => {func.apply(context, args)}, wait);}
}

立即执行版：

//立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。function debounce(func,wait) {let timeout;return function () {let context = this;let args = arguments;if (timeout) clearTimeout(timeout);let callNow = !timeout;timeout = setTimeout(() => {timeout = null;}, wait)if (callNow) func.apply(context, args)}
}

封装版本：

/*** @desc 函数防抖* @param func 函数* @param wait 延迟执行毫秒数* @param immediate true 表立即执行，false 表非立即执行*/
function debounce(func,wait,immediate) {let timeout;return function () {let context = this;let args = arguments;if (timeout) clearTimeout(timeout);if (immediate) {var callNow = !timeout;timeout = setTimeout(() => {timeout = null;}, wait)if (callNow) func.apply(context, args)}else {timeout = setTimeout(function(){func.apply(context, args)}, wait);}}
}

函数节流(throttle)

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳版：

function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let context = this;let args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}}
}

定时器版:

function throttle(func, wait) {let timeout;return function() {let context = this;let args = arguments;if (!timeout) {timeout = setTimeout(() => {timeout = null;func.apply(context, args)}, wait)}}
}

时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

封装版本：

/*** @desc 函数节流* @param func 函数* @param wait 延迟执行毫秒数* @param type 1 表时间戳版，2 表定时器版*/
function throttle(func, wait ,type) {if(type===1){let previous = 0;}else if(type===2){let timeout;}return function() {let context = this;let args = arguments;if(type===1){let now = Date.now();if (now - previous > wait) {func.apply(context, args);previous = now;}}else if(type===2){if (!timeout) {timeout = setTimeout(() => {timeout = null;func.apply(context, args)}, wait)}}}
}

案例

div 元素绑定了 mousemove 事件，当鼠标在 div(灰色)区域中移动的时候会持续地去触发该事件导致频繁执行函数。

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>let num = 1;let content = document.getElementById('content');function count() {content.innerHTML = num++;};//防抖content.onmousemove = debounce(count,1000,true );//节流content.onmousemove = throttle(count,1000,1 );
</script>

参考

轻松理解防抖和节流

彻底弄懂函数防抖和函数节流