JavaScript滚动条的制作

setTimeout的第三个参数
服务器君一共花费了218.389 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

效果演示

这个效果的制作是借助setTimeout的第三个参数。setTimeout/setInterval,这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用:

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

即传了第三个参数,第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处,即解决了回调函数的执行上下文,比如要调用某个对象的某个方法,即可以通过参数把该对象传进去。

setTimeout(function(obj){
	obj.method();
}, 2000, obj);

上次看到一个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外的系列浏览器的支持。

要让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');

下面是模拟进度条的代码:

<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',300);
    load_1.start();
</script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/586,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/586

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《重构:改善既有代码的设计》 福勒(Martin Fowler) (作者), 熊节 (译者)

《重构:改善既有代码的设计》清晰地揭示了重构的过程,解释了重构的原理和最佳实践方式,并给出了何时以及何地应该开始挖掘代码以求改善。书中给出了70多个可行的重构,每个重构都介绍了一种经过验证的代码变换手法的动机和技术。《重构:改善既有代码的设计》提出的重构准则将帮助你一次一小步地修改你的代码,从而减少了开发过程中的风险。

更多计算机宝库...