javascript - JavaScript 函数错误

Question

我希望 close 和函数修改变量 gate，方法是将填充变大，直到它等于变量 open。我不知道为什么它不起作用，请帮忙。

function wait() {
    setTimeout(100);
}

function close() {
    var closed = 1;
    var opened = 19;
    var gate = opened;

    while (gate !== closed) {
        gate-=1;
        gate.style.paddingTop = open'%';
        wait();
    }
}

Answer 1

JS 中的超时不是阻塞 - 它们在单独的线程中运行。有大量关于它们如何在线工作的资源，因此我不会详细介绍。

要修复代码，您可以重构以进行递归调用:

var closed = 1;
var opened = 19;
var gate = opened;
var gateEl = document.getElementById('gate');

function close() {
    if (gate !== closed) {
        gate -= 1;
        gateEl.style.paddingTop = gate + '%'; // open stays the same
        setTimeout(close, 100);
    }
}

• 递归调用close函数
• 定义一个将更改其填充的元素
• 使用 gate 而不是 open 来实际更改填充

<小时/>

这是一个实例:

var closed = 1;
var opened = 19;
var gate = opened;
var gateDiv = document.getElementById('gate');

function close() {
  console.log(gate);
  if (gate > closed) {
    gate -= 1;
    gateDiv.style.paddingTop = gate + '%';
    setTimeout(close, 100);
  }
}

close();

#gate {
  height: 50px;
  width: 50px;
  background: green;
}

<div id="gate"></div>