js的延迟函数self.setInterval()_js self.setinterval-优快云博客

本文链接：https://blog.youkuaiyun.com/Inuyasha1121/article/details/50587583

本文介绍了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的效果。

终止：在外部以条件判断作为终止。