原生JavaScript节流函数参数传递的正确方法
在使用原生JavaScript实现节流函数时，直接使用apply方法传递参数可能会导致函数提前执行，并非预期的节流效果。 以下分析并解决这个问题：
错误示例：
function sayHi(data) { console.log(data + new Date().getSeconds());}function throttle(func, delay) { let timer = null; return function() { const context = this; const args = arguments; if (!timer) { timer = setTimeout(() => { func.apply(context, args); // 问题在此行 timer = null; }, delay); } };}window.addEventListener('resize', throttle(sayHi('abc'), 2000)); // sayHi立即执行上述代码中，throttle(sayHi('abc'), 2000) 会立即执行 sayHi('abc')，throttle 函数接收到的 func 实际上是 sayHi('abc') 的返回值 (undefined)，导致节流失效。
立即学习“Java免费学习笔记（深入）”；
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
508 查看详情
正确方法：
为了避免函数提前执行，我们需要创建一个闭包，将参数传递给节流函数内部的匿名函数：
function sayHi(data) { console.log(data + new Date().getSeconds());}function throttle(func, delay) { let timer = null; return function(...args) { // 使用rest参数接收参数 const context = this; if (!timer) { timer = setTimeout(() => { func.apply(context, args); timer = null; }, delay); } };}window.addEventListener('resize', throttle(sayHi, 2000)); // 正确的调用方式window.dispatchEvent(new Event('resize')); //触发resize事件测试//传递参数的方式window.addEventListener('resize', throttle(function(){sayHi('abc')},2000));在这个改进后的版本中：
我们使用 ...args (rest参数) 来接收传递给节流函数的所有参数。sayHi 函数本身作为参数传递给 throttle 函数，而不是立即执行它。在 setTimeout 回调函数中，func.apply(context, args) 正确地将参数应用于 sayHi 函数。
现在，sayHi 函数只会在 setTimeout 延迟后执行，实现了正确的节流功能。 第二个window.addEventListener例子展示了如何传递参数给sayHi函数。 记住要触发一个resize事件来测试节流效果。
以上就是JavaScript节流函数中如何正确传递参数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1136006.html
微信扫一扫 
支付宝扫一扫 
