当前位置: 首页 > ds >正文

JS手写代码篇---手写节流函数

8、节流函数

什么是节流函数?

指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

与防抖函数有什么区别?

防抖函数是延迟函数执行,直到事件停止触发一段时间后再执行,适用于需要等待事件停止触发后再执行的场景。而节流函数则是控制函数在指定时间内只执行一次,适用于需要控制执行频率的场景。

   function throttle(fn, wait) {let preTime = new Date();return function () {let context = this;let args = arguments;let curTime = new Date();let during = curTime - preTime;if (during > wait) {// 当时间大于等待时间的时候// 执行函数fn.apply(context, args);// 更新 preTimepreTime = curTime;}};}

() => {
fn.apply(context , args);//保证函数的上下文和参数与原始调用时一致
} , wait)
}
}


## 8、节流函数**什么是节流函数?**指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。**与防抖函数有什么区别?**防抖函数是延迟函数执行,直到事件停止触发一段时间后再执行,适用于需要等待事件停止触发后再执行的场景。而节流函数则是控制函数在指定时间内只执行一次,适用于需要控制执行频率的场景。

function throttle(fn, wait) {
let preTime = new Date();
return function () {
let context = this;
let args = arguments;
let curTime = new Date();
let during = curTime - preTime;
if (during > wait) {
// 当时间大于等待时间的时候
// 执行函数
fn.apply(context, args);
// 更新 preTime
preTime = curTime;
}
};
}


http://www.xdnf.cn/news/10193.html

相关文章:

  • Linux(8)——进程(控制篇——上)
  • mac mini m4命令行管理员密码设置
  • 【Java基础-环境搭建-创建项目】IntelliJ IDEA创建Java项目的详细步骤
  • 专业课复习笔记 11
  • 评论功能开发全解析:从数据库设计到多语言实现-优雅草卓伊凡
  • 在 Linux 上构建 Kubernetes 单节点集群:Minikube 安装与实战指南
  • 第2章-12 输出三角形面积和周长(走弯路解法)
  • 26 C 语言函数深度解析:定义与调用、返回值要点、参数机制(值传递)、原型声明、文档注释
  • C++ 模版复习
  • 【个人思考】超级玛丽亚小游戏设计文档
  • Unity UI系统中RectTransform详解
  • 用美图秀秀批处理工具定制专属图片水印的方法详解
  • 【技术支持】安卓11开机启动设置
  • IDEA修改JVM内存配置以后,无法启动
  • TC/BC/OC P2P/E2E有啥区别?-PTP协议基础概念介绍
  • C语言操作Kafka
  • 3DMAX+Photoshop教程:将树木和人物添加到户外建筑场景中的方法
  • java对接bacnet ip协议(跨网段方式)
  • Kotlin-特殊类型
  • 安卓逆向篇JEB 反编译断点动态调试加密算法还原逻辑会员绕过
  • 亚马逊商品评论爬取与情感分析:Python+BeautifulSoup实战(含防封策略)
  • InnoDB引擎逻辑存储结构及架构
  • 【Netty系列】Reactor 模式 2
  • 奇异值分解(SVD):线性代数在AI大模型中的核心工具
  • 使用原生前端技术封装一个组件
  • 面试题 08.08. 有重复字符串的排列组合【 力扣(LeetCode) 】
  • Smith圆图知识学习笔记
  • Linux 文件 IO 性能监控与分析指南
  • QEMU/KVM课程大纲暨学习路线(1)
  • 榕壹云医疗服务系统:基于ThinkPHP+MySQL+UniApp的多门店医疗预约小程序解决方案