JavaScript函数节流
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript函数节流,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2392字,纯文字阅读大概需要4分钟。
内容图文
![JavaScript函数节流](/upload/InfoBanner/zyjiaocheng/603/a1738fd9ffdf4d4bab27ff076d5b21a6.jpg)
一、前言
相对于函数防抖来说,函数节流的应用场景和频次更大一些。当然,如果想复习函数防抖,请点击《函数防抖》。废话不多,上正题:
二、什么是函数节流
我们设想一个进地铁站过闸机的场景:每位乘客在刷卡进入之后,大约2秒后门关闭,下一个乘客才能刷卡进入。如果上一个乘客刷卡之后还没有进入或者闸机还未关闭,此时另一个乘客在当前闸机是刷不上卡的。这就是一种节流的操作。
节流函数:不管事件的触发频率有多高,只会间隔设定的时间执行一次目标函数。简单来说:每隔单位时间,只执行一次
三、为什么要函数节流
某些情况下,浏览器的一些高频事件对于用户来说其实并没有太大必要,比如懒加载中的scroll事件。但是如果使用函数防抖的话,只有用户停止滚动后,才会判断是否到了页面底部;如果使用函数节流,只要页面滚动就会间隔一段时间判断一次,即保留了用户体验,又提升了执行速度,节省资源。
四、如何实现函数节流
方法1:利用延时器
实现原理:提前定义容器变量用来保存setTimeout
的返回值,在每次触发事件,准备开启新的setTimeout
之前,先检查容器变量中是否保存有setTimeout
的返回值,如果有,那么不再开启setTimeout
,保证同一时间只有一个setTimeout
存在。setTimeout
执行完毕之后,手动清空容器变量的返回值。
var t = null;
document.onmousemove = function (){
if(t) return;
t = setTimeout(() => {
console.log("函数节流");
t = null;
}, 300);
}
封装之后:
document.onmousemove = throttle(function(){
console.log("函数节流");
})
// 函数节流
function throttle(cd,time=300){
var t = null;
return function(){
if(t) return;
t = setTimeout(() => {
cd.call(this);
t = null;
}, time);
}
}
方法2:利用时间戳
实现原理:提前设定变量,准备存储事件结束后的时间戳,在事件开启之后,立即保存时间戳,并判断当前时间戳和事件结束后的时间戳的差值,决定是否需要执行本次事件。事件执行完毕之后,保存事件结束时的时间戳,以供下次开启事件时计算差值。
var last = 0;
document.onmousemove = function(){
var now = new Date().getTime();;
if (now - last > 300) {
console.log("函数节流")
last = new Date().getTime();;
}
}
封装之后
document.onmousemove = throttle(function(){
console.log("函数节流")
})
function throttle(cb, wait=300){
let last = 0;
return function(){
var now = new Date().getTime();;
if (now - last > wait) {
cb.call(this);
last = new Date().getTime();;
}
}
}
五、函数节流的应用场景
一些高频事件,在被连续触发时,需要限定在单位时间内只执行一次,如:
- DOM 元素的拖拽(mousemove)
- 射击游戏在单位时间只能发射一颗子弹(mousedown/keydown)
- Canvas 模拟画板功能(mousemove)
- 搜索联想(keyup)
- 懒加载,在滚动过程中判断是否需要加载图片(scroll)
- 页面滚动到底部加载更多(scroll)
以上,如有纰漏或不同观点,欢迎留言讨论…
内容总结
以上是互联网集市为您收集整理的JavaScript函数节流全部内容,希望文章能够帮你解决JavaScript函数节流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。