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

最新推荐文章于 2024-02-23 16:11:16 发布

weixin_30407613

最新推荐文章于 2024-02-23 16:11:16 发布

阅读量122

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xesam/archive/2011/11/24/2261102.html

版权

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>

转载于:https://www.cnblogs.com/xesam/archive/2011/11/24/2261102.html

weixin_30407613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于setTimeout的第三个参数以及小应用

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);...
复制链接

扫一扫