js 防抖实战讲解
栏目: JavaScript · 发布时间: 5年前
内容简介:在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedown、mousemove
在前端开发中会遇到一些频繁的事件触发,比如:
window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……
为此,我们举个示例代码来了解事件如何频繁的触发:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>频繁触发例子</title> </head> <body> <input id="search" type="text" placeholder="请输入要查询的内容"> <script> var search = document.getElementById('search'); function getUserAction() { console.log('执行查询操作',+new Date()); }; search.addEventListener('keyup', getUserAction) </script> </body> </html> 复制代码
效果图如下:
一输入内容,就会一直执行getUserAction 函数!
因为这个例子很简单,所以浏览器完全反应的过来,可是如果是复杂的回调函数或是 ajax 请求呢?假设 1 秒触发了 10 次,每个回调就必须在 1000 / 10 = 10ms 内完成,否则就会有卡顿出现。
为了解决这个问题,我们可以使用防抖
防抖原理
在事件被触发n秒后,再去执行回调函数。如果n秒内该事件被重新触发,则重新计时。结果就是将频繁触发的事件合并为一次,且在最后执行。
第一个例子
代码如下:
var search = document.getElementById('search'); function getUserAction(e) { console.log(e); console.log('执行查询操作',+new Date()); }; function debounce(func, wait) { var timeout; return args => { if (timeout) clearTimeout(timeout) timeout = setTimeout(func, wait); } } const debounceAjax = debounce(getUserAction, 1000) subBtn.addEventListener('keyup', debounceAjax) 复制代码
输入后1秒执行方法,一直输入以输入完为准,1秒执行方法,点击看看使用效果:
第二个例子
立刻执行
有这样一个需求,鼠标移动事件,移动到内容上,立即执行函数.
根据这段表述,我们可以写的代码:
function debounce(func, wait, immediate) { var timeout; return args => { let context = this; if (timeout) clearTimeout(timeout) if (immediate) { // 如果已经执行过,不在执行 let callNow = !timeout; timeout = setTimeout(function() { timeout = null; },wait) if (callNow) func.call(context, args) } else { timeout = setTimeout(() => { func.call(context, args) },wait) } } } 复制代码
debounce(getUserAction, 1000, true)
鼠标移动到内容上立即执行方法,重复移动以最后一次移动为准1秒后执行方法,看看使用效果:
完善功能增加取消防抖功能
function debounce(func, wait, immediate) { var timeout,result; var debounced = function() { var context = this; var args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { // 如果已经执行过,不再执行 var callNow = !timeout; timeout = setTimeout(function() { timeout = null; }, wait) if (callNow) result = func.apply(context, args) } else { timeout = setTimeout(function() { func.apply(context, args) }, wait); } return result; } debounced.cancel = function() { clearTimeout(timeout); timeout = null; } return debounced; } 复制代码
执行代码:
var setUseAction = debounce(getUserAction, 1000, true); container.onmousemove = function() { var res = setUseAction(); console.log(res) } document.getElementById("button").addEventListener('click', function() { setUseAction.cancel(); }) 复制代码
设置时间间隔较大10秒,当点击取消防抖后立即执行了,看看使用效果:
参考地址:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- immer.js 实战讲解
- 实战大数据平台开发架构讲解
- 实战讲解:如何用Python搭建一个服务器
- Hive SQL 综合应用案例实战及多项性能指标深入讲解-DW商业环境实战
- 跨域认证解决方案-JSON WEB TOKEN讲解与实战
- 【白瞟版】分布式商城系统,最牛逼技术栈,实战讲解407个视频,含源码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective Objective-C 2.0
Matt Galloway / 爱飞翔 / 机械工业出版社 / 2014-1 / 69.00元
《effective objective-c 2.0:编写高质量ios与os x代码的52个有效方法》是世界级c++开发大师scott meyers亲自担当顾问编辑的“effective software development series”系列丛书中的新作,amazon全五星评价。从语法、接口与api设计、内存管理、框架等7大方面总结和探讨了objective-c编程中52个鲜为人知和容易被忽......一起来看看 《Effective Objective-C 2.0》 这本书的介绍吧!