搜索框模糊搜索防抖&&节流

月下绯烟

已于 2023-01-19 01:41:54 修改

阅读量1.5k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-01-19 01:36:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45654741/article/details/128681360

版权

文章讲述了如何通过防抖和节流技术优化搜索框的性能，防止频繁发送请求导致的性能问题。防抖函数确保在规定时间内只执行最后一次，而节流函数则保证在设定的时间间隔后才执行下一次，这两种方法都可以有效地减少不必要的请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现搜索框搜索
input输入value 下面发送请求request 显示content
逐次发送请求无疑会影响性能
可以采用防抖或节流优化

函数节流函数执行一次后只有大于设定的执行周期后才会执行第二次
应用需要频繁触发的函数为了优化性能
在规定时间内只让函数触发的第一次生效后面不生效

   /* fn节流函数  delay 规定时间 */
        function throttle(fn, delay) {
            // 设置变量记录上一次函数触发时间
            let lastTime = 0
            return function() {
                // 记录当前函数触发时间
                let nowTime = Date.now();
                // 当前时间减去上一次触发时间 大于规定时间 执行fn  规定时间内不执行
                if (nowTime - lastTime > delay) {   
                	fn();
                    // 同步时间
                    lastTime = nowTime
                }
            }
        }
      throttle(fn1(),200)

函数防抖
一个频繁触发函数在规定时间内只让最后一次生效前面不生效

 function debounce(fn, delay) {
  let timer = null //记录上一次延时器
  return function() {
      clearTimeout(timer) //清除上一次定时器
      // 重新设置定时器
      timer = setTimeout(function() {
          fn.apply(this)
      }, delay);
  }
}
debounce(fn2(),300)