关于setTimeout/setInterval的第三个参数

2017年9月15日 MK JS 1 阅读 2611次

setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。

它们在非IE(6-9)浏览器中还可以如下使用

setTimeout(function(obj){
    alert(obj.a);
}, 2000, {a:1});

用法：

var arr = [1,9,2,8,3,7,4,6,4,5];
     for(var i = 0, len = arr.length; i < len; i++){
         setTimeout(function(x){
             console.log(x);
         },arr[i],arr[i]);
     }

你可以传多个参数给回调函数，如下

setTimeout(function(a, b){
    alert(a);
    alert(b);
}, 2000, 1,2);

如果有第三个参数，某些情况下的调用就可以方便的处理回调函数中当前对象的问题，写起来好看点。

扩展一下Function，增加一个延时调用（参考而已）：

Function.prototype.delay = function(){
        var args = Array.prototype.slice.call(arguments,0);
        setTimeout(function(fn){
            fn.apply('',args.slice(1));
        },args[0],this);
    }
    var fn = function(x){
        alert(x)
    };
    fn.delay(1000,'xesam');

关于回调模拟进度条的例子：

代码预览

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>loading</title>
    <style type="text/css">
        #loading{ height: 20px; margin: 0 auto; border: 1px solid #d4d4d4;}
    </style>
</head>
<body>
<div id="loading"></div>
<script type="text/javascript">
    function Load(id,width){
        this.ele = document.getElementById(id);
        this.indicator = document.createElement('div');
        this.width = (width > 0 && width) || 300;
        this.init();
    }
    Load.prototype = {
        constructor:Load,
        init:function(){
            this.ele.style.width = this.width + 'px';
            this.ele.appendChild(this.indicator);
            var iStyle = this.indicator.style;
            iStyle.width = 0;
            iStyle.height = '100%';
            iStyle.background = '#ff5500';
        },
        start:function(){
            //this.init();
            this.loading();
        },
        loading:function(){
            this.timer = setTimeout(function(obj){
                var t = obj.indicator.data || 0;
                if(t < obj.width){
                    obj.indicator.style.width = t + 1 +'px';
                    obj.indicator.data = t + 1;
                    obj.loading();
                }else{
                    clearInterval(obj.timer);
                }
            },10,this);
        },
        stop:function(){
            clearTimeout(this.timer);
        }
    }
    var load_1 = new Load('loading',600);
    load_1.start();
</script>
</script></body>
</html>

js, setTimeout