节流会不断触发,但是每隔一段时间才会执行一次,而防抖仅在最后一次触发,也是执行间隔时间内触发的最后一次。

1.防抖

将动作写进定时器中,限制触发时间,如果在时间间隔内连续触发动作,会造成排队现象,所以在下一次动作触发之前先将定时器清除,也就是说如果不及时清除定时器,那么就会依次执行触发的所有事件。

基础防抖

应用

我们在执行搜索操作的时候,每次输入都会触发键盘事件,但是实际情况下这是不合理的。这个时候我们就需要进行防抖的应用。

①首先我们需要获取到搜索框,并且给它添加键盘弹起事件

获取标签添加事件

②关键字就是搜索框中的value值

let keyword = $(this).val();

③在定时器中发起请求,获取数据,拼接字符串,将结果添加到ul

事件流程

④在下一次请求发起之前,先将上一次请求执行完才可以,也就是只有在1秒以后才可以继续触发请求

防抖代码

⑤优化,在搜索框中没有输入值时就不要显示ul

优化

2.节流

以鼠标移动事件为例

①声明一个充当开关的变量,与定时器名称使用同一个名,默认值为null。

let timer = null; // 充当开关的角色(null、1)

②给document添加鼠标移动事件

事件部署

③还是将代码写进定时器中,但是这次需要有一个限制条件,由于每次触发定时器定时器都会返回一个自然数,从1开始计数,而我们将变量值为null定义为执行下次事件的条件,所以在核心代码执行完毕之后,我们需要手动将值改为null

节流操作

作者:沃德麻鸭
链接:http://events.jianshu.io/p/4616adf56ed8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

声明:
根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!
1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现,请熟知后再支付下载!。
Q码基地 » jQuery防抖和节流

发表评论

只做精品资源

立即查看 了解详情