我目前正试图围绕一些JavaScript.
我想要的是要在屏幕上打印的文本,然后计数到给定的数字,如下所示：
“Test”
[1 sec. pause]
“1”
[1 sec. pause]
“2”
[1 sec. pause]
“3”
这是我的JS：
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
function count(){
writeNumber = $("#target");
setTimeout(function(){
writeNumber.html(initMessage);
},1000);
for (var i=1; i < numberCount; i++) {
setTimeout(function(){
writeNumber.html(i.toString());
},1000+1000*i)};
};
count();
});
这是我的标记：
当我渲染页面时,我得到的只是“测试”,然后是“4”.
我不是JavaScript天才,所以解决方案可能相当容易.任何有关错误的提示都受到高度赞赏.
你可以在这里玩我的例子：http://jsfiddle.net/JSe3H/1/
最佳答案
您有一个可变范围问题.循环内的计数器(i)仅限于计数功能.当循环执行完毕时,值为4.这会影响每个setTimeout函数,这就是为什么你只看到“4”.
我会像这样重写它：
function createTimer(number,writeNumber) {
setTimeout(function() {
writeNumber.html(number.toString());
},1000 + 1000 * number)
}
function count(initMessage,numberCount) {
var writeNumber = $("#target");
setTimeout(function() {
writeNumber.html(initMessage);
},1000);
for (var i = 1; i < numberCount; i++) {
createTimer(i,writeNumber);
}
}
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
count(initMessage,numberCount);
});
createTimer函数确保使用createTimer提供的新范围“捕获”循环内的变量.
更新示例：http://jsfiddle.net/3wZEG/
另请查看以下相关问题：
> What’s going on under the hood here? Javascript timer within a loop
> JavaScript closure inside loops – simple practical example
