如何分析JS函数的防抖和节流
发表于:2024-10-27 作者:千家信息网编辑
千家信息网最后更新 2024年10月27日,如何分析JS函数的防抖和节流,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。节流实质上是:如果你持续触发事件,每隔一段时间
千家信息网最后更新 2024年10月27日如何分析JS函数的防抖和节流
如何分析JS函数的防抖和节流,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
节流实质上是:如果你持续触发事件,每隔一段时间,只执行一次事件。
根据这个需求我们可以通过时间戳实现节流:
//第一个实现方式function throttle(func, wait) {
var context, args;
var previous = 0;
return function() {
var now = +new Date();
context = this;
args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}}//另外补充一下获取时间戳的方式吧// new Date().getTime()// Date.parse(new Date())// +new Date()// Date.now()// 通过判断再次点击时间与上次点击时间的时间戳是否大于传入的时间,来判断函数是否被执行
另一种实现方式通过定时器,通过判断定时器的存在来决定函数是否被执行
// 第二种实现方式function throttle(func, wait) {
var timeout;
var previous = 0;
return function() {
context = this;
args = arguments;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
func.apply(context, args)
}, wait)
}
}}//
看上面两种实现方式的代码,比较可以发现:
方式一的事件会立刻执行,因为获取当前时间戳肯定会大于wait传入的时间,方式二事件会在 n 秒后第一次执行,因为设置了定时器,所以会在wait秒之后执行。
如果我们连续执行了几次,第一种方式会在事件结束之后不会再执行函数,第二种会在结束之后wait秒之后再执行一次。
怎么中和实现一下两种方式呢?
// 第三种方式function throttle(func, wait, options) {
var timeout, context, args, result;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
func.apply(context, args);
if (!timeout) context = args = null;
};
var throttled = function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
};
return throttled;}
//leading:false 表示禁用第一次执行
//trailing: false 表示禁用停止触发的回调
//那就是 leading:false 和 trailing: false 不能同时设置。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
方式
时间
事件
函数
定时器
第一次
需求
帮助
分析
清楚
代码
内容
再次
可以通过
同时
实质
对此
就是
文章
新手
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
苏州智奇胜软件开发有限公司
天眼查北京唐爱时空网络技术
软件开发成果包括源代码
2000W数据库系统
本地影院服务器
电力行业网络安全意识淡薄
软件开发职位有什么要求
批量替换单元格部分数据库
如何理解汽车软件开发与测试
网络安全知识宣传短片
宝山区智能化软件开发协议
华新网络安全吗
360股票车企网络安全
制作网页创造数据库
服务器1 核1G和2G区别
泰拉瑞亚心动服务器
数据安全网关与数据库审计
使网络安全 起来
网络安全在身边作文400字
冷雨夜服务器管理工具
服务器系统电话激活命令
通信和网络安全培训
象棋软件开发
提升数据库安全保护
劲拓回流焊数据库
数据库怎么给表创建默认值约束
喜来快递南京软件开发
冒险岛单机版数据库正式版
陌陌软件开发者是谁
赴外软件开发 国家