【说站】javascript函数节流是什么
JavaScript 函数 什么 节流
2023-06-13 09:13:22 时间
javascript函数节流是什么
说明
1、让连续执行的函数,变为固定时间段间断地执行。在一段频繁操作中,可以触发多次,但是触发的频率由自己指定。
2、应用场景有DOM元素的拖拽功能实现、计算鼠标移动的距离等。
还有Canvas 模拟画板功能、搜索联想。
实例
/*
@params:
func[function]:最后要触发执行的函数
wait[number]:触发的频率
@return
可以被调用执行的函数
*/
function throttle(func,wait = 300){
let timer = null,
previous = 0;//记录上一次操作时间
return function anonymouse(...params){
let now = new Date(),//记录当前时间
remaining = wait - (now - previous);//记录还差多久达到我们一次触发的频率
if(remaining <= 0){
//两次操作的间隔时间已经超过wait了
window.clearInterval(timer);
timer = null;
previous = now;
func.call(this,...params);
}else if(!timer){
//两次操作的间隔时间还不符合触发的频率
timer = setTimeout(() => {
timer = null;
previous = new Date();
func.call(this,...params);
}, remaining);
}
}
}
以上就是javascript函数节流的介绍,希望对大家有所帮助。
相关文章
- 如何在JavaScript中使用高阶函数
- JavaScript笔记(10) 第一阶段结束
- 【说站】javascript如何声明函数
- spidermonkey php,javascript SpiderMonkey中的函数序列化如何进行_基础知识[通俗易懂]
- JavaScript专项算法题(1):回调和高阶函数
- JavaScript 回调函数
- javascript字符串长度截取函数详解编程语言
- JavaScript处理时间与日期详解编程语言
- 利用Java来压缩 JavaScript 代码详解编程语言
- Javascript实现的分页函数
- Javascript操纵Cookie实现购物车程序
- 用JAVASCRIPT如何给<textarea></textarea>赋值
- javascript尚未实现错误解决办法
- Javascript的匿名函数小结
- JavaScript中判断函数是new还是()调用的区别说明
- javascript动态改变onclick事件触发函数代码
- javascript的currying函数介绍
- javascript算法题求任意一个1-9位不重复的N位数在该组合中的大小排列序号
- javascript函数以及基础写法100多条实用整理
- javascript提取URL的搜索字符串中的参数(自定义函数实现)
- javascript里模拟sleep(两种实现方式)
- 利用javascript判断文件是否存在
- javascript事件函数中获得事件源的两种不错方法
- javascript中的return和闭包函数浅析
- JavaScript判断变量是否为空的自定义函数分享