为什么我不能在 setTimeout() 函数中更改 i？答案

【问题标题】：Why i can't change i in setTimeout() function?为什么我不能在 setTimeout() 函数中更改 i？
【发布时间】：2021-09-16 06:51:53
【问题描述】：

function turn(id, player) {
    let value = parseInt($('#' + id).attr('data-value'));
    showValue();
    id = parseInt(id);
    for (let i = 1; i <= value; i++) {
        let newId = id + i;
        setTimeout(function () {
            if (player == 'p1') {
                let value = parseInt($('#' + newId).attr('data-value'));
                if (newId == 14) {
                    let mainValue = parseInt($('#main-1').attr('data-value'));
                    $('#main-1').attr('data-value', mainValue + 1);
                    // i want to add i++; but nothing happen
                } else {
                    $('#' + newId).attr('data-value', value + 1);
                }
            } else {
                let value = parseInt($('#' + newId).attr('data-value'));
                if (newId == 7) {
                    let mainValue= parseInt($('#main-2').attr('data-value'));
                    $('#main-2').attr('data-value', mainValue + 1);
                    //here too
                } else {
                    $('#' + newId).attr('data-value', value + 1);
                }
            } showValue();
        }, i * 500);
    }
}

当我在那个地方用控制台记录 i 时，什么也没发生。但是当我在 setTimeout 函数之外更改 i 时，它可以工作。我该如何解决？

【问题讨论】：

嗨！你能去掉所有不必要的部分，只留下一个参数的最小例子吗？您调用函数 showValue 但您的代码中不存在此函数。
据我所知，您实际上需要setInterval 而不是setTimeout
尝试将 let 改为 var
你的i没有更新的原因，你可以在这里找到stackoverflow.com/q/37977602/14032355。

标签： javascript jquery settimeout

【解决方案1】：

    function turn(id, player) {
    let value = parseInt($('#' + id).attr('data-value'));
    showValue();
    id = parseInt(id);
    let i = 1;
    for (i = 1; i <= value; i++) {
        let newId = id + i;
        setTimeout(function () {
            if (player == 'p1') {
                let value = parseInt($('#' + newId).attr('data-value'));
                if (newId == 14) {
                    let mainValue = parseInt($('#main-1').attr('data-value'));
                    $('#main-1').attr('data-value', mainValue + 1);
                     i++;
                } else {
                    $('#' + newId).attr('data-value', value + 1);
                }
            } else {
                let value = parseInt($('#' + newId).attr('data-value'));
                if (newId == 7) {
                    let mainValue= parseInt($('#main-2').attr('data-value'));
                    $('#main-2').attr('data-value', mainValue + 1);
                    i = i + 1
                } else {
                    $('#' + newId).attr('data-value', value + 1);
                }
            } showValue();
        }, i * 500);
    }
}

我认为这里应该可以正常工作，因为它对我有用！祝你有美好的一天:)

【讨论】：

添加评论或解释您所做的更改以及更改原因。
我已经在函数@Lain之外定义了变量

【解决方案2】：

在您的情况下，您应该使用setInterval 而不是setTimeout。

function turn(id, player) {
  let value = parseInt($("#" + id).attr("data-value"));
  showValue();
  id = parseInt(id);
  let i = 1;
  const timer = setInterval(function () {
    if (player == "p1") {
      let newId = id + i;
      let value = parseInt($("#" + newId).attr("data-value"));
      if (newId == 14) {
        let mainValue = parseInt($("#main-1").attr("data-value"));
        $("#main-1").attr("data-value", mainValue + 1);
        // i want to add i++; but nothing happen
      } else {
        $("#" + newId).attr("data-value", value + 1);
      }
    } else {
      let value = parseInt($("#" + newId).attr("data-value"));
      if (newId == 7) {
        let mainValue = parseInt($("#main-2").attr("data-value"));
        $("#main-2").attr("data-value", mainValue + 1);
        //here too
      } else {
        $("#" + newId).attr("data-value", value + 1);
      }
    }
    showValue();
    i++;
    if (i > value) {
      clearInterval(timer);
    }
  }, 500);
}

【讨论】：