防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 如何实现防抖呢? 我们拿滚动事件举例子，用户的滚动会频繁触发滚动事件，很容易造成页面卡死。那么我们可以封装如下一个函数。 每次想调用函数的时候，设置一个定时器让函数延迟执行。 当连续触发的时候，前面 ...

故事背景： 项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖（debounce），在网上想找个现成的用下，但是好多都不对，于是就自己搞了。 先看看概念 函数防 ...

事件优化 防抖与节流 防抖： 所谓防抖，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。 指触发事件后在n秒内只执行一次，若在n秒内再次触发则重新计算 节流： 所谓节流 ...

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

1.　防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 function debounce(fn) { let timer = null; // 标记定时器 return function () { clearTimeout ...

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

防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟 //防抖 ...

防抖和节流记录 防抖简介 resize和scroll等事件操作的时候，会非常频繁的触发导致页面不断的重新渲染，非常影响性能，加重浏览器负担，导致用户体验不好，防抖函数就是当事件持续触发事件时，debounce函数会把事件合并且不会触发回调，当停止触发事件delay时长的时候才会触发事件 ...