js的延迟函数self.setInterval()

最新推荐文章于 2024-08-23 10:32:36 发布

Inuyasha1121

最新推荐文章于 2024-08-23 10:32:36 发布

阅读量4.7k

点赞数 2

分类专栏： javascript 函数 function 小功能文章标签：延迟self.setInterval

本文链接：https://blog.csdn.net/Inuyasha1121/article/details/50587583

版权

javascript 同时被 3 个专栏收录

74 篇文章 1 订阅

订阅专栏

函数

17 篇文章 0 订阅

订阅专栏

小功能

17 篇文章 0 订阅

订阅专栏

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的效果。

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