为什么我不能在 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);
}
}

当我在那个地方安慰我时，什么也没发生。但当我在setTimeout函数外更改i时，它就起作用了。我该怎么解决？

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

我认为这里应该像对我一样有效！祝你今天愉快：(