JavaScript函数节流和函数去抖知识点学习
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript函数节流和函数去抖知识点学习,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3181字,纯文字阅读大概需要5分钟。
内容图文
这篇文章给大家分享了JavaScript函数节流和函数去抖的相关的知识点内容,有需要的朋友们可以学习参考下。概念
节流 (throttle) 让一个函数不要执行的太频繁,减少执行过快的调用,叫节流
去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用,只让其执行一次
throttle 应用场景
DOM 元素的拖拽功能实现(mousemove)
射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
计算鼠标移动的距离(mousemove)
Canvas 模拟画板功能(mousemove
搜索联想(keyup
监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次
debounce 应用场景
每次 resize/scroll 触发统计事件
文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)
函数去抖的实现
我们以scroll事件为例,探究如何是实现滚动一次窗口打印一个hello world 字符串。 如果不对其节流或者去抖:
这样每滚动一次,实际上会打印多个 hello world。 函数去抖背后的思路是指,某些代码不可能在没有间断的情况下连续执行。创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
《高程三》给出了最简洁最经典的去抖代码,如下:
再做一些改动
函数节流的实现
函数节流就是让连续执行的函数,变为固定时间段间断地执行。 大概有两种方式实现。
其一使用时间戳来判断是否已经到回调执行时间,记录上次执行的时间戳,然后每次触发事件时执行回调,回调中判断当前时间戳距离上次执行时间戳的时间间隔是否有*s,如果是,则执行,并更新上次执行的时间戳,如此循环。
第二种方法是使用定时器,比如,当scroll事件刚触发时,打印一个hello world ,然后设置一个1000ms的定时器,此后每次触发scroll事件,触发回调,如果已经存在定时器,则回调不执行方法,知道定时器出发,handler被清除,然后重新设置定时器。
更新方法:
以上就是本章的全部内容,更多相关教程请访问JavaScript视频教程!
以上就是JavaScript函数节流和函数去抖知识点学习的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的JavaScript函数节流和函数去抖知识点学习全部内容,希望文章能够帮你解决JavaScript函数节流和函数去抖知识点学习所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。