昨天学习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的值依次往后执行。