Question

我显然不完全理解setTimeout函数在Javascript中的工作原理：

function move() {
    var a;
    for(a = 0; a < 101; a++){
        setTimeout(function(){
            block.style.marginTop = (750 - a) + 'px');
        }, 1000);
    }
    for(a = 0; a < 101; a++){
        setTimeout(function(){
            block.style.marginTop = (650 + a) + 'px');
        }, 1000);
    }
}

我尝试过多种不同的方法，但For Loops每次都会立即执行。如何让For循环在＆＃39; a＆＃39;的每个值之间等待1秒？因此，当a = 0时，代码执行然后在a = 1等运行之前等待1秒，直到第一个For循环结束，然后第二个For循环以相同的方式执行。

此外，有没有比使用setTimeout更有效的方法呢？就像一种写作的方式

sleep(1000);

或类似的东西。如果这是在javascript中产生延迟的唯一方法，那么整个setTimeout功能看起来非常复杂。我尝试了一次，但它完全没有任何作用

await sleep(1000);

任何有关超时和Javascript延迟的帮助，特别是在循环中，都将非常感谢！

Answer 1

您可以在我发布的here答案中找到价值。这将在循环中解释setTimeout更多。

另外，您可能想要解释您要完成的任务。看起来你要么

尝试每秒移动一个元素
尝试在一秒后移动元素~100像素

对于第一个选项，我会改用CSS Transitions。你对元素的移动方式有很大的灵活性，你只需要指定方向和距离。

对于第二个选项，您可以抛弃循环并将内容保留在内部，在一些超时后将新marginTop设置为完整值。

Answer 2

    setTimeout(function(){
        block.style.marginTop = (750 - a) + 'px');
    }, 1000);

您的代码的这一部分使用＆＃39; a＆＃39; 1000毫秒后变量。在这个时候＆＃39; a＆＃39;是100，因为你的循环没有停止运行setTimeout函数，它发生的原因是javascript是异步的。在js中解决这个问题的一个解决方案是使用递归函数。如果没有必要使用for循环，你可以使用这段代码：

  var a = 0;
  function my_loop(a) {
    if (a < 101) {
      setTimeout(function() {
        block.style.marginTop = (750 - a) + 'px');
        my_loop(a);
      }, 100);

      a++;
    }
  }
  my_loop(a);

但是如果你想做你的问题的工作，我认真地建议你使用CSS。

Answer 3

正如@squint所提到的，您可以使用setInterval来完成任务。

以下是一个例子：

＆＃13;

// create an element
const width = 10;
const el = document.createElement('div');
el.setAttribute('id', 'main');
document.body.appendChild(el);
el.style.width = width + 'px';

// question-relevant code starts here

const a = [...Array(101).keys()]; // fancy way to create [0, 1, 2, 3, ...]

const it = a[Symbol.iterator](); // for convenience

const int = setInterval(() => {
 const { value, done } = it.next(); // next iteration
 if (done) { clearInterval(int); return }; // finished?
 el.style.width = width + value + 'px'; // adjust width
}, 10);

＆＃13;

#main {
  height: 100px;
  width: 10px;
  background: green;
}

＆＃13;

使用带有setTimeout（或其他延迟）的For循环的Javascript

3 个答案: