js的延迟函数self.setInterval()

本文介绍了setInterval()方法的应用,包括如何按照指定周期调用函数,并通过两个实例展示了内部和外部终止setInterval()的不同方式。

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

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 window.clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作window.clearInterval() 方法的参数。


例子一:在内部终止
var i = 0;

var interval = self.setInterval(function(){
    if( i<10 ){
        alert(i);
    }else{
        window.clearInterval(interval);
    }
    i++;
},1000);

功能:以上方法每隔一秒输出从数字0到9的弹框。

终止:用变量 i 的大小作为条件,if判断符合条件则调用window.clearInterval()来终止setInterval()函数的循环。

因为第一次肯定会走,所以 setInterval() 会产生返回值 interval,在第十次的时候即可以使用 interval 作为window.clearInterval()的参数来终止循环。

例子二:在外部终止

var dots_num = 0;//loading省略号数目

function loading(lastInterval,loadText){
        
    $('#loading').text(loadText);
    if(lastInterval){
        window.clearInterval(lastInterval);
        dots_num = 0;
    }
    
    var interval = self.setInterval(function(){
        switch(dots_num%7){
        case 0:
            $('#loading').text(text+'.');
        break;
        case 1:
            $('#loading').text(text+'..');
        break;
        case 2:
            $('#loading').text(text+'...');
        break;
        case 3:
            $('#loading').text(text+'....');
        break;
        case 4:
            $('#loading').text(text+'.....');
        break;
        case 5:
            $('#loading').text(text+'......');
        break;
        case 6:
            $('#loading').text(text+'');
        break;
        }
        dots_num++;
    },500);
    return interval;
}
    
var interval = loading(null,'正在下载,请稍候');

if(xxxx){//load is over
    window.clearInterval(interval);
}

功能:以上方法实现每隔半秒钟文字后省略号的个数从0递增到6的周期性变化(达到6再从0开始递增),可以呈现动态loading的效果。

终止:在外部以条件判断作为终止。
### JavaScript `setTimeout` 和 `setInterval` 的性能特性比较 为了实现最优的 JavaScript 运行时性能,避免双重评估至关重要[^1]。当涉及到定时器函数如 `setTimeout` 和 `setInterval` 时,理解两者的差异及其最佳实践对于编写高效代码非常重要。 #### 使用场景对比 - **`setTimeout`**: 此方法用于延迟指定时间后执行一次回调函数。它适合于仅需一次性延时操作的情况。 - **`setInterval`**: 定义了一个循环调用的时间间隔,在每次到达设定周期时都会触发回调函数。然而,如果前一个实例还未完成而下一个已经启动,则可能导致资源浪费或意外行为[^2]。 #### 性能考量与优化建议 ##### 避免频繁创建新计时器 通过合理规划逻辑结构来减少不必要的重复初始化可以有效提升效率: ```javascript // 不推荐的做法:连续多次设置相同频率的任务可能会造成过载 let intervalId; intervalId = setInterval(() => { doSomething(); }, 50); clearInterval(intervalId); ``` 相反地,应该考虑使用单次性的 `setTimeout` 来模拟类似的持续效果,并在每次结束时重新安排下一轮任务: ```javascript function loopTask() { doSomething(); // 只有当前任务完成后才会计划下次运行 setTimeout(loopTask, 50); } loopTask(); ``` 这种方法不仅能够防止潜在的竞争条件问题,还能更好地控制每轮之间的依赖关系。 ##### 处理上下文丢失的问题 另一个需要注意的地方是在异步环境中保持正确的 `this` 值。由于 JavaScript 中的作用域链机制,直接传递匿名函数作为参数可能引起意料之外的结果[^3]: ```javascript Game.prototype.restart = function () { this.clearLocalStorage(); const self = this; // 解决方案一:保存外部作用域中的 'this' this.timer = setTimeout(function(){ self.clearBoard(); }, 0); /* 或者 */ this.timer = setTimeout(() => { // 解决方案二:箭头函数自动绑定父级作用域内的 'this' this.clearBoard(); }, 0); }; ``` 以上两种方式都可以确保即使经过多层嵌套之后仍然可以获得预期的对象引用[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值