for循环和setTimeout模拟ext进度条

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

别妆

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

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏： EXt 文章标签： setTimeout MessageBox updateProgress

本文链接：https://blog.youkuaiyun.com/weixin_36888269/article/details/53419116

EXt 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在学习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的值依次往后执行。