JS防抖的实现方法

简介: JS防抖的实现方法

防抖

let input = doucument.querySelector('input')
input.addEventListener('keyup', debounce(function(){
 })
)
function debounce(fn,wait) {
   let timer = null;
   return function() {
         if(timer) clearTimeout(timer);
          timer = setTimeout( () => {        
          fn.apply(this.arguments)
          timer = null;
      },wait)
    }
}

作用:
找到页面中第一个 input 元素,添加一个 "keyup" 事件监听器,当用户输入内容时,使用防抖函数 debounce 来限制事件的触发频率,每次事件最多只被触发一次。


防抖函数返回一个新函数,该函数会在一定时间内不执行,在该时间内如果再次触发了该事件,会清除之前的计时器并重新设置计时器。当计时器结束后,才会执行传入的函数并向后台服务器请求数据,同时将 input 元素的值作为参数进行输出。


这样可以防止用户输入过快或者频率过高,导致向后台服务器发送重复的请求


相关文章
|
1天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
5 0
|
1天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
8 2
|
1天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
6 1
|
2天前
|
JavaScript 前端开发
JS中正则方法的使用 - 蓝易云
以上就是JavaScript中正则方法的基本使用。这些方法可以用于执行复杂的字符串处理和验证任务。
13 1
|
2天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
2天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
2天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
2天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
3天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
8 2