目录
-
为什么需要防抖和节流
- 在进行窗口的resize, scroll , 输入框内容校验等操作的时候,如果事件处理函数调用的频率无限制 , 会加重浏览器的负担 , 导致用户的体验非常糟糕
- 在进行网络请求的时候 , 点击事件 , 输入框值改变的时候 , 都需要发送网络请求 , 如果不进行处理的话 , 一直发送网络请求 , 会加重浏览器和服务器的负担
-
防抖
- 将几次的多次触发的操作合并为一次操作进行
- 防抖原理
- 原理是维护一个计时器 , 规定在delay事件后触发函数,但是在一定时间内再次触发的话 , 就会取消之前的计时器而重新设置. 这样一来 , 只有最后一次操作能被触发
- 上述为简单的防抖操作 , 而如果想第一次触发的时候直接执行 , 连续触发的时候只执行一次 , 需要进行判断 , 但这个时候执行的操作并不是最后一次
-
<body> <input type="text" /> <script> // 这种方式this和事件对象都没进行处理 , 只是简单的进行防抖操作 let inp = document.querySelector('input'); inp.addEventListener('input', debpunce(inpVal, 1000), false); function inpVal(e) {