setTimeout 居然支持三个参数！！！

最新推荐文章于 2022-03-29 21:56:13 发布
原创 最新推荐文章于 2022-03-29 21:56:13 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#setTime

本文探讨了JavaScript中setTimeout函数的高级用法，揭示了它不仅支持传递两个参数（延迟时间和回调函数），还支持传递额外的参数作为回调函数的参数。这种特性极大地丰富了setTimeout的功能性和灵活性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最经再看ES6 promise的时候，发现书本的例子中setTimeout 居然有三个参数，瞬间全蒙。难道阮一峰大侠也犯错了？

进过资料查询，是自己孤陋寡闻了。

setTimeout 居然支持三个参数，或者三个以上的参数。

setTimeout的第三个以后的参数是作为第一个function 的参数传进去的。

仅IE不支持setTimeout/setInterval函数的第三个以上参数
12-02
即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。 代码如下: ...
JavaScript实现向setTimeout执行代码传递参数的方法
10-24
问题在于，如果直接将一个带参数的函数名作为`setTimeout`的第一个参数，JavaScript不会传递任何参数给这个函数。例如： ```javascript function showMsg(message, timeout) { console.log(message); } ...
setTimeout的第三个参数
bidepanm的博客
11-02 471
for(var i = 0; i<5; i++){ setTimeout(function(){ console.log(i); },1000); } 输出：5 5 5 5 5 若想输出为：0 1 2 3 4 闭包 for(var i=0; i<5; i++){ (function(j){ setTimeout(function(){ console.log(j); },j*1000); }
浅谈setTimeout鲜为人知的第“三”个参数
woyisheng的博客
02-09 1218
鲜为人知的setTimeout
setTimeout的第三个参数作用
Schaffer的博客
04-01 560
说起来你可能不相信，setTimeout居然有第三个参数，我以前也没用过这个，但最近看到一个代码解决了for循环里面加入了setTimeout的例子，下面一起看看这个setTimeout第三个参数。 for(var i = 0; i<6; i++){ setTimeout(function(){ console.log(i); },1000); } 看到上面的这个for例子，相信很多人都能脱口而出，它会连续输出6次6，因为setTimeout是一个异步操作，而等到执行
关于JS中setTimeout()无法调用带参函数问题的解决方法
10-22
// 获取第三个参数以后的所有参数作为数组 var f = function () { fRef.apply(null, argu); // 使用 apply 方法调用原始函数并传递参数 }; return _st(f, mDelay); // 使用保存的原始 setTimeout 延迟执行 f ...
setTimeout和setInterval的浏览器兼容性分析
10-31
通过对 `setTimeout` 和 `setInterval` 的浏览器兼容性问题的分析，我们了解到在IE浏览器中，这两个函数不支持函数参数传递这一特性。针对这一问题，可以通过使用全局变量、字符串形式的表达式或者创建闭包的方式...
被遗忘的setTimeout第三个参数
Kylin的博客
02-26 331
被遗忘的setTimeout第三个参数 平时我们使用setTimeout设置定时器，都只使用过前两个参数 setTimeout(func, timeout) // func 执行函数 // timeout 设置的定时时间 举个例子：在for循环中使用setTimeout for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i) }, 1000) } ● 这是一道很经典的面试题，可以随口说出打印三个3，因为
setTimeout添加第三个参数。
weixin_42910765的博客
02-22 423
for(var i=0;i<6;i++){ setTimeout(function(j){ console.log(j); },i*1000,i); } 由于每次传入的参数是从for循环里面取到的值，所以会依次输出0~5。 看了上面的代码，相信你对这个setTimeout的第三个参数作用大概了解了，是的，它就是给setTimeout第一个函数的参数。 翻一下MSDN文档，里面确实有记录setTimeout第三个及后面的参数的。下面我们来看看这个代码 function
setTimeout多参数传递
江湖的博客
12-12 1780
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 常规用法： setTimeout(function(){ alert("Hello"); }, 3000); 加强版用法： 如下面完整代码中的setTimeout(alertFunc, 2000, "Runoob", "Google") &lt;!DOCTYPE html&gt; &lt;html&gt; &l...
setTimeout改造,可以传递多个参数
wanghl_web的博客
12-17 1216
开发中会经常使用到setTimeout，使用的时候需要传递两个参数，第一个参数是arg1（可以是字符串，也可以是方法），第二参数arg2（时间），但是如果arg1想传递多个参数，这样字符串拼接就比较麻烦了，这里我们做一个小小的改造，不多说了，直接上代码： 该案例的作用是：改造setTimeout方法，使其能够传递多个的参数 var $cp
setTimeout可以传第三个甚至更多个参数
weixin_30394633的博客
08-17 176
以前在使用setTimeout()方法的时候，都是传两个参数第一个参数是一个函数，第二个参数是毫秒数，表示异步处理过多少毫秒执行第一个函数参数。后来有看到有人给setTimeout()传第三个参数，不清楚传第三个参数是干嘛的，于是就学习了一下。第三个或者更多参数都是第一个函数的参数,详情请看https://developer.mozilla.org/en-US/docs/Web/API/Windo...
setTimeout传递多个参数
尘雨::执着VC
08-10 1725
function WorkerFunction(args){ if (args && args.length && args.length > 0) { args[0].innerHTML = args[1]; args[1] = (new Date().toLocaleString()); window.se
js你不知道的小知识，setTieout的第三个参数
xjc2333333的博客
03-29 308
js小知识，你绝对不会知道的第三个参数
setTimeout函数的参数
qq_44284088的博客
10-08 3446
setTimeout函数的参数 平常用setTimeout的时侯 setTimeout(function,timer) 查阅setTimeout的函数原型 var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); var timeoutID = setTimeout(function[, delay]); var timeoutID = setTimeout(code[, delay]); 类似于 var timeoutID
setTimeout的function带参数
weixin_34415923的博客
09-08 332
setTimeout【注：out的'o'是小写】如果setTimeout(function,mill)中的function带参数，则定义的毫秒树mill会失效，function方法会立即执行解决方法：把参数定义为"全局变量"进行操作，或者不要单独写一个方法，直接再同一个方法内直接写function函数，例如本例中的第一个setTimeout；例子1： varoperatio...
settimeout 传递带有参数的函数
weixin_34034670的博客
12-24 228
方法一:传递带有参数的function给settimeout,写个函数，该函数返回一个不带参数的函数 &lt;script language="javascript"&gt; function show(name) {alert("Hello World:" + name);} function _show(name) { ret...
addEventListener第三个参数是什么意思
最新发布
05-29
### 解决鼠标快速离开时未触发 `mouseleave` 事件的问题以及 `addEventListener` 第三个参数的含义 #### `addEventListener` 第三个参数的含义 在 JavaScript 中，`addEventListener` 的第三个参数用于指定事件监听器的行为。这个参数可以是一个布尔值或一个对象。如果是一个布尔值，它决定了事件是否以捕获阶段执行。 - 当该参数为 `true` 时，表示事件监听器会在捕获阶段被调用。 - 当该参数为 `false`（默认值）时，表示事件监听器会在冒泡阶段被调用[^1]。 此外，从现代浏览器开始支持，这个参数也可以是一个对象，包含以下属性： - `capture`：布尔值，等同于之前的布尔值参数，决定事件是在捕获阶段还是冒泡阶段被处理。 - `once`：布尔值，表示事件监听器是否只调用一次，之后自动移除。 - `passive`：布尔值，表示事件监听器是否会调用 `preventDefault()`。如果设置为 `true`，则浏览器假定 `event.preventDefault()` 永远不会被调用[^2]。 ```javascript element.addEventListener('click', function(event) { console.log('Event triggered'); }, { capture: true, once: true, passive: true }); ``` #### 解决鼠标快速离开时未触发 `mouseleave` 事件的问题 当鼠标快速移动时，可能会出现 `mouseleave` 事件未被触发的情况。这通常是因为鼠标的移动速度超过了事件监听器的响应速度。以下是几种解决方法： ##### 方法一：使用定时器延迟隐藏 通过引入定时器来延迟隐藏 `tooltip`，可以避免因鼠标快速移动而导致的未触发问题。这种方法确保即使鼠标快速移出，也会在一定时间后隐藏 `tooltip`。 ```javascript let hideTimeout; function handleMouseEnter() { clearTimeout(hideTimeout); showTooltip(); } function handleMouseLeave() { hideTimeout = setTimeout(() => { hideTooltip(); }, 300); // 延迟300毫秒隐藏 } ``` ##### 方法二：检查 `relatedTarget` 利用 `mouseleave` 事件中的 `relatedTarget` 属性，可以判断鼠标是否进入了同一父级下的其他子元素。如果 `relatedTarget` 不属于当前元素的子节点，则认为鼠标真正离开了整个区域，并执行隐藏逻辑。 ```javascript function handleMouseLeave(event) { const parentElement = event.currentTarget; if (!parentElement.contains(event.relatedTarget)) { hideTooltip(); } } ``` ##### 方法三：手动控制 `tooltip` 的显示与隐藏 通过绑定 `visible` 属性到父组件的状态中，可以手动控制 `tooltip` 的显现和隐藏。这种方法适用于 Vue 或 React 等框架中的场景。 ```vue <template> <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> Hover me <span v-if="isTooltipVisible">Tooltip Content</span> </div> </template> <script> export default { data() { return { isTooltipVisible: false, }; }, methods: { handleMouseEnter() { this.isTooltipVisible = true; }, handleMouseLeave() { this.isTooltipVisible = false; }, }, }; </script> ``` ##### 方法四：结合防抖技术 使用防抖（debounce）技术可以减少因频繁触发事件而导致的问题。通过限制事件的触发频率，确保 `mouseenter` 和 `mouseleave` 的处理更加稳定。 ```javascript function debounce(func, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; } const debouncedMouseEnter = debounce(handleMouseEnter, 200); const debouncedMouseLeave = debounce(handleMouseLeave, 200); ``` ### 注意事项 - 在复杂布局下，可能需要调整 `tooltip` 的位置以确保其始终可见。 - 如果 `delay` 被设置为非零值，需注意延迟时间内用户可能已移出目标区域，因此应合理设置延迟时间。 - 使用 `relatedTarget` 属性时，需确保浏览器兼容性，部分老旧浏览器可能不支持该属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值