在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感， 因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。 防抖（debounce）： 　　在事件被触发 ...

在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感， 因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。 防抖（debounce）： 　　在事件被触发 ...

介绍 😲 首先看一个没有经过任何处理的🌰： 效果如下： 可以发现，只要按下键盘就会触发函数调用，这样在某些情况下会造成资源的浪费，在这些情况下，可能只需要在输入完成后做请求，比如身份验证等。 防抖处理 首先看下效果： 由此可以看出来，当我们重新频繁 ...

一、防抖 概念：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 场景：等待用户输入完毕再进行搜索 思路：每次触发事件时都取消之前的延时调用方法 一、节流 概念：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 场景 ...

概念： 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 函数节流（throttle）与 函数防抖（debounce）都是 ...

防抖 使用场景：如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，就会消耗很大的服务器资源。如果每次用户停止输入后，延迟超过一定时间时，才去请求服务器的话，会节省服务器资源，提升用户体验。 原理：事件回调函数在一段时间（300毫秒）后才执行 ...

防抖、节流的概念是用户高频率的操作某一事件导致的性能问题。 防抖： 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。 节流： 在规定的时间内执行方法。 应用场景： 用户拖动滚动条可以用 节流 方式实现。 input输入关键字实时发送请求 ...

防抖函数。 　　将几次操作合并为一次操作进行。设置一个计时器，规定在延迟时间后触发函数，但是在延迟时间内如果再次触发，就会取消之前的计时器。如此，只有最后一次操作能触发。代码如下： 节流函数。 　　一定时间内只触发一次函数。并且开始触发一次，结束触发一次。代码如下： ...