for循环和setTimeout模拟ext进度条

本文介绍了如何在学习Ext过程中,利用for循环和setTimeout函数来模拟一个进度条弹窗的效果,旨在实现类似MessageBox功能并更新进度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

昨天学习ext的时候  想模拟一个进度条弹窗   大概这样

Ext.onReady(function () {
	var msgBox = Ext.MessageBox.show({    
        title:'提示',    
        msg:'请稍后',    
        modal:true,    
        width:300,    
        progress:true,
        animEl:"esttest",  
        buttons:Ext.MessageBox.YESNOCANCEL,
        icon:Ext.MessageBox.QUESTION
    });

 	for(var i = 1; i < 10; i++){
    		setTimeout(function(){
    			var x=a/9;    		
    			msgBox.updateProgress(x,Math.round(x*100)+"% 正在加载");
    		},1000*a);
    
    	}
});


实际运行并不不能达到预期,查阅资料才知道 for循环 嵌套setTimeout时  ,他们是异步进行的,再继续查阅,要实现他们的正常调用。要用到闭包的知识,

经过一晚上的学习,我大概能了解了闭包的含义。

这里就总结下自己遇到的问题吧

首先最后实现代码是这样的:

 
for(var i = 1; i < 10; i++){
    	(function(a){
    		setTimeout(function(){
    		var x=a/9;    		
    		msgBox.updateProgress(x,Math.round(x*100)+"% 正在加载");
    		console.log(a);	
    		},1000*a);
    	})(i);
    }


为了调试 我在setTimeout里加一个alert(a),而结果却是乱的 虽然能输出1-10 但是顺序错乱了,至于原因,我猜大概是alert和ext消息框之间的冲突。(这个问题留在以后研究了)

这里如果 for的i直接传入定时器 那i不会等待计时器完成操作,而是自己循环十次。解决方法就是把计时器外层加一个函数,这样计时器虽然也不会等待,但是外层函数会依次把1-10得数接收进来,但是进度条走加载的时候几乎也是同步进行。所以会在计时器时间上设置1000*a这样保证计时器根据i的值依次往后执行。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值