定时器(setTimeout/setInterval)调用带参函数失效解决方法

本文探讨了在JavaScript中使用setTimeout及setInterval时遇到的带参函数失效问题,并提供了两种解决方案:使用匿名函数包裹及用引号包裹需调用的函数。

也许你曾碰到过这样的问题,不管是setInterval()还是setTimeout(),当code参数里放一个带参函数时,定时器都会失效,看下面这个例子: 

function test(str){ 
    alert(str); 
} 
var a = "abcde" 
setTimeout(test(a),3000); 

 

执行上面代码,页面不会延迟3秒调用test(a),而是会立即执行test(a),IE、FF、Chrome下都会出现这个问题,如果你经常用到定时器,这个问题应该应该经常会碰到,那么要怎样去解决呢? 
笔者在这里归纳两种常用的解决方法,当然应该也还有其他的解决方法,在这里就不一一赘述。 


方法1:用匿名函数包裹 

function test(str){ 
    alert(str); 
} 

var a = "abcde" 
    setTimeout(function(){ 
    test(a); 
},3000); 

 

方法2:用引号包裹需调用的函数 

function test(str){ 
  alert(str); 
} 
var a = "abcde" 
setTimeout("test('+a+')",3000); 

 

上面只以setTimeout()为例,setInterval()同样适用,这里就不在过多叙述了。

转载于:https://www.cnblogs.com/shifu204/p/7001924.html

小程序中定时器清除失效通常是因为对 `setTimeout` 或者 `setInterval` 的引用管理不当,导致无法正确地通过 `clearTimeout` 或 `clearInterval` 清除它们。以下是可能导致这种情况的原因以及解决方案: ### 原因分析 1. **未保存定时器 ID** 如果你在设置定时器有将返回值(即定时器ID)保存到变量中,则后续无法调用对应的清除函数。 2. **作用域问题** 定时器相关的代码如果嵌套在某些特定的作用域内,可能会导致外部无法访问该定时器实例。 3. **页面销毁后未清理** 小程序切换页面或关闭窗口时,如果有及时清理定时器资源,可能会留下无效的计时任务。 4. **异步回调延迟** 比如网络请求完成后才尝试清空某个已经结束的任务等场景下容易出错。 ### 解决方案示例 #### 示例 1 - 使用全局变量存储 TimerId 并确保能正常移除它 ```javascript Page({ data:{ timer:null, }, startTimer() { const that = this; // 记录生成的时间句柄 let id = setInterval(() => {console.log('每秒运行一次')}, 1000); if (that.data.timer === null) { that.setData({timer:id}); } }, stopTimer(){ clearInterval(this.data.timer); console.log("已停止"); this.setData({timer:null}); // 置空避免重复添加 } }) ``` 以上例子展示了如何利用数据绑定技术保证每个组件都维护自己独立的状态信息,并且只有当状态确实为空的时候才会新增一个新的间隔循环;而一旦想要终止这个过程就可以简单直接借助之前的记录去寻找对应目标并将其摧毁掉即可。 ### 注意事项 - 避免频繁创建、删除大量短生命周期的小型定时单元以免影响性能; - 对于复杂逻辑考虑结合 Promise 和 async-await 结构重构业务流程减少层级依赖来的混乱现象发生几率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值