JS setTimeout()函数
JS setTimeout()函数
提问于 2020-06-16 02:50:28
我刚刚开始学习JS。我想用JS setTimeout函数来改变跨度标签相对于时间的位置。但它不能与此代码一起工作。我做错了什么？
function myFunction2() {
var j = 0;
document.getElementById("demo").style.left = j + "px";
j++;
}
function myFunction() {
var i = 0;
while (i <= 200) {
setTimeout(myFunction2, 20);
i++;
}回答 4
Stack Overflow用户
发布于 2020-06-16 02:51:45
您需要在函数外部声明j。否则，每次调用函数时都要将其设置为0。
此外，您正在同时运行该函数的所有实例，在循环后20毫秒。您应该将超时时间乘以循环索引：
完整演示：
var j = 0;
function myFunction2() {
document.getElementById("demo").style.left = j + "px";
j++;
}
function myFunction() {
var i = 0;
while (i <= 200) {
setTimeout(myFunction2, 20 * i);
i++;
}
}<span id="demo" style="position:absolute;left:0px;">Bu benim ilk paragrafım.</span><br> <button type="button" onclick="myFunction();">Try</button>
或者您可以使用setInterval()自动重复运行它。
function myFunction() {
var j = 0;
var int = setInterval(function() {
if (j > 200) {
clearInterval(int);
} else {
document.getElementById("demo").style.left = j + "px";
j++;
}
}, 20);
}<span id="demo" style="position:absolute;left:0px;">Bu benim ilk paragrafım.</span><br> <button type="button" onclick="myFunction();">Try</button>
Stack Overflow用户
发布于 2020-06-16 03:22:11
看起来您每次都是在函数内部声明J变量并将其设置为。所以每次当你调用这个函数的时候，你都会以相同的时间间隔调用超时。我的解决方案是将J设置在函数外部，就像一个全局变量，然后尝试它。
var j = 0;
function myFunction2() {
document.getElementById("demo").style.left = j + "px";
j++;
}
function myFunction() {
for (var i = 0; i <= 200; i++) {
setTimeout(myFunction2, 20 * i);
}
}
Stack Overflow用户
发布于 2020-06-16 02:55:40
它不起作用，因为每当您调用myFunction2()时，变量j再次被初始化为0，从技术上讲，您将0px赋给demo。所以这就是为什么它不会移动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62394966
复制相关文章
相似问题
腾讯云开发者
