Javascript SetTimeout 和循环

IT技术 javascript settimeout
2021-02-01 03:40:12

专家。Javascript 没有产生预期的延迟效果。
从其他问题中，我了解到，问题在于 settimeout 以及我使用它的方式。但我仍然无法理解 Settimeout 是如何工作的。所以我把代码放在这里。由于知识目的，只需要使用 Javascript。
实际上，我正试图澄清我对此的概念，即 javascript 中的闭包。它们是 Javascript 的一种扭曲的东西吗？

var objImg = new Object();
var h;
var w;

var no = 100;
while (no != 500) {
    setTimeout(function () {
        size(no, no);
    }, 2000);

    /* it's get executed once, instead of repeating with while loop
    Does it leave loop in mid? I get image with 500px height and
    width, but effect is not acheived.
    */

    no = no + 50;
}

function size(h, w) {
    var objImg = document.getElementsByName('ford').item(0);
    objImg.style.height = h + 'px';
    objImg.style.width = w + 'px';
}
3个回答

你有两个问题：

  • no 调用回调时将具有循环结束的值
  • 您正在从循环运行的同一时间 2000 毫秒开始对所有超时进行编程。

这是您可以解决的方法：

var t = 0
while (no != 500) {
   (function(no) {
      t += 2000;
      setTimeout(function() { size(no,no);} ,t);
   })(no);
   no  = no+50; // could be written no += 50
}

立即执行的函数创建一个作用域来保护 的值no。

关于 的一点解释(function(no) {：

变量的作用域是

  • 全球范围
  • 一个函数

上面的代码可以写成 

var t = 0
while (no != 500) {
   (function(no2) {
      t += 2000;
      setTimeout(function() { size(no2,no2);} ,t);
   })(no);
   no += 50;
}

在这里，我们有两个变量可能更清楚：

  • no，其值随每次迭代而变化，调用超时时为 500
  • no2, 实际上no2每次调用内部匿名函数一个变量

每次调用内部匿名函数时，它都会声明一个新no2变量，其值no在调用时（在迭代期间）。no2因此，此变量受到保护，并由给定的回调使用setTimeout。

嗨@dystroy - 还没有成功。您的代码使浏览器无响应。
2021-03-15 03:40:12
@msinfo 我的第一个版本是错误的（闭包中没有增加）。你能试试最后一个吗？
2021-03-22 03:40:12
对不起，编辑（很难回答流感）。还需要详细解释还是说清楚了？
2021-04-10 03:40:12
感谢@daleyjem，我现在有了 settimeout 工作的想法。但需要功能（无）工作方面的帮助。我就在那里，但我知道我错过了一些东西。
2021-04-10 03:40:12
是的，它确实有效。您能否解释一下，while 循环的两次迭代，以及 t 的值，并且在这些条件下没有变量。谢谢（所有这些多次编辑。:-)
2021-04-13 03:40:12

为什么不直接使用 setInterval() 呢？

var objImg = new Object();
var h;
var w;

var no = 100;
var myInterval = window.setInterval(function() {
    size(no, no);
    no = no + 50;
    if (no >= 500) clearInterval(myInterval);
}, 2000);

function size(h, w) {
    var objImg = document.getElementsByName('ford').item(0);
    objImg.style.height = h + 'px';
    objImg.style.width = w + 'px';
}
he he he :-) 它按你的方式工作。其实我写上面的测试代码是为了测试我对settimeout和其他东西的了解，在这里我学到了另一种方法。一旦有人解释了我的代码中 settimeout 发生了什么，就会将其标记为答案。谢谢。
2021-03-14 03:40:12
哦！我明白了，我真的按照你想的方式思考。但是oop！因为@dystroy 提供了带有 settimeout 选项的解决方案，并且他多次编辑了他的答案以通知我。我接受他的回答并投票给你。
2021-03-15 03:40:12
就像dystroy所说的......当所有这些setTimeout（）被调用时（将同时进行），“no”的值将增加到500（这将发生在代码一执行就在几毫秒内）。
2021-03-21 03:40:12
您的代码不会像您想象的那样工作，因为您认为一旦时间从前一个 setTimeout() 过去了，每个 setTimeout() 都会被调用。但事实并非如此。所有这些 setTimeout() 都将同时被立即调用。
2021-03-26 03:40:12

你的问题在于你的 size() 函数语法和算法：

var objImg = new Object();
var h;
var w;

var no = 100;

var int = window.setInterval(function () {
    size(no,no);
    no += 50;
},2000)

function size(h, w) {
    if (h == 500){
        window.clearInterval(int);
        return;
    }
    var height = h + 'px';
    var width = w + 'px';
    document.getElementsByName('ford').item(0).style.height = height;
    document.getElementsByName('ford').item(0).style.width = width;
}

http://jsfiddle.net/AQtNY/2/

其它你可能感兴趣的问题
上一篇如何在事件上对 jquery 进行指令更新 ng-model？ 下一篇有没有办法从 4x4 矩阵计算 X 和 Y 轴上的 3D 旋转