关于setTimeout的第三个参数以及小应用

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 310 次

小笑话：让一个人愤怒的方法有两种：第一、说话只说一半setTimeout的通常用法是干什么我就不多说了，上次看到一个setTimeout的一个用法：vararr=[1,9,2,8,3,7,4,6,4

小笑话：让一个人愤怒的方法有两种：第一、说话只说一半

setTimeout的通常用法是干什么我就不多说了，上次看到一个setTimeout的一个用法：

　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的第三个参数主要得到了除IE外的系列浏览器的支持，具体说明可以参考这篇文章

http://www.cnblogs.com/snandy/archive/2011/05/18/2050315.html

后面的留言也给出了一个扩展IE对象让其支持第三个参数的方法：

(function(w){
    //ie传入第三个参数
    if(!+[1,]){//除IE外，!+[1,]都是返回false
        (function(overrideFn){
            w.setTimeout = overrideFn(w.setTimeout);
            w.setInterval = overrideFn(w.setInterval);
        })(function(originalFn){
            return function(code,delay){
                var args = Array.prototype.slice.call(arguments,2);
                return originalFn(function(){
                    if(typeof code == 'string'){
                        eval(code);
                    }else{
                        code.apply(this,args);
                    }
                },delay);
            }
        })
    }
})(window)

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

扩展一下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');

下面是一个模拟进度条的例子：

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<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" src="/project/javascript/common_js/Xe.js"></script>
<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>
</body>
</html>

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。