Why i can't change i in setTimeout() function?

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

when i console.log the i in that spot, nothing happened. but when i change i outside setTimeout function, it works. how can i fix that?

Hi! can you remove all unnecessary parts and leave only minimal example with one parameter? you call function showValue but this function does not exist in you code. — Greg--, Jul 05 '21 at 13:31
From what I see, you actually need ```setInterval``` instead of ```setTimeout``` — ikhvjs, Jul 05 '21 at 13:32
The reason why your i is not updating, you can find here https://stackoverflow.com/q/37977602/14032355. — ikhvjs, Jul 05 '21 at 13:48

score 1 · Answer 1 · answered Jul 05 '21 at 13:36

You should use setInterval instead of setTimeout in your case.

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

score -1 · Answer 2 · answered Jul 05 '21 at 13:35

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

I think this here should work as it worked for me! Have a nice day :)

Add a comment or explanation of what you changed and why so. — Lain, Jul 05 '21 at 13:36

Why i can't change i in setTimeout() function?

2 Answers2