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

Question

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);
    }
}

当我在那个地方console.log的时候，什么都没发生。但是，当我在setTimeout函数之外更改我时，它可以工作。我怎么才能解决呢？

Answer 1

在您的情况下，您应该使用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);
}

Answer 2

    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);
    }
}

我觉得这个应该像对我一样管用！祝你今天愉快:)