javascript - JS - 如何正确使用setTimeout()

Question

因此，我有一个在 setTimeout 上执行的函数，console.log 返回我命名为 time 的变量的正确值，但是当我运行代码时，该函数正在毫无延迟地运行。该代码是我正在制作的游戏的服务器端。该代码应该在使用元素后逐渐恢复玩家的生命值。我的问题是 settimeout 函数...当我在浏览器中使用它时它也可以工作，但不能从我的 Node 控制台使用它。

function balm(i){
    this_sql ="UPDATE game_moblist SET hp = least(max_hp, hp +"+Math.round(i/2)+") WHERE id ="+mobid;
    connection.query(this_sql, function(err, rows, fields) {
        if (err) err=null
    });
    console.log(this_sql);
    this_sql = "SELECT hp, max_hp FROM  game_moblist WHERE id ="+mobid;   //emite catch all update pointint to hp..
    connection.query(this_sql, function(err, rows, fields) {
        if (err) throw err;
        socket.emit ('updatemisc',handler,rows);//eval handler using args
        if (rows[0].hp==rows[0].max_hp){
            i=0;
            return i;
        }
    });
}
for (i=30;i>=0;i--){
   time=(31-i)*1000;
   console.log(time);
   setTimeout(balm(i),time);
}

Answer 1

问题出在这里:

setTimeout(balm(i),time);

它的作用是调用 balm 并将其返回值输入到setTimeout，这不是您想要的。您想要传递 setTimeout 一个函数，该函数在调用时将使用给定的 i 值调用 balm。你这样做:

setTimeout(makeHandler(i),time);
function makeHandler(index) {
    return function() {
        balm(index);
    };
}

这样，balm 函数就会稍后被调用，并在计划超时时使用 i 值进行调用。如果没有 makeHandler 东西，所有 balm 实例都会看到 i，就像它们运行时一样(例如，它们都会看到 -1)。这是因为在 JavaScript 中，闭包可以持久访问上下文中的变量；不是创建闭包时它们的副本。所以他们都看到了i的当前值。 (更多:Closures are not complicated)

(请注意，在 NodeJS(您正在使用的环境)以及 Firefox 上，您可以使用 setTimeout 的非标准扩展，该扩展允许您将参数传递给函数；请参阅 pksunkara's answer 。但对于希望在网络上的客户端(而不是 Node 的服务器端)执行此操作的任何人，请注意，这是不标准。)

为了说明这一点，这里有一个示例(这个示例在浏览器中运行，但对于 NodeJS 等服务器端内容来说是相同的):

(function() {

  // Wrong
  setTimeout(function() {
    var i;

    for (i = 0; i < 5; ++i) {
      setTimeout(function() {
        show("wrong", i);
      }, i * 50);
    }
  }, 0);

  // Right
  setTimeout(function() {
    var i;

    for (i = 0; i < 5; ++i) {
      setTimeout(makeHandler(i), i * 50);
    }

    function makeHandler(index) {
      return function() {
        show("right", index);
      };
    }
  }, 500);

  function show(marker, val) {
    display("show (" + marker + "): " + val);
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

Live copy | source

这是输出:

show (wrong): 5show (wrong): 5show (wrong): 5show (wrong): 5show (wrong): 5show (right): 0show (right): 1show (right): 2show (right): 3show (right): 4