Javascript 在循环中使用超时更改图标

我有下面的代码，它循环遍历表中的每条记录，并将保存图标设置为选中标记

2秒钟后，它应变回保存图标。但事实并非如此

我对其他按钮也使用了完全相同的方法，而且效果很好。所以我怀疑这与循环通过每条记录的速度有关。虽然setTimeout应该是异步的

有更好的方法吗？每个按钮应单独操作。我最后的办法是编写一个函数，只改变页面上的所有图标，我不想这样做

const iconToggle = () => {
    const isCheckIcon = btn.firstElementChild.classList.contains('fa-check');
    if (isCheckIcon) {
        btn.innerHTML = '<i class="fa fa-save fa-2x"></i>';
    } else {
        btn.innerHTML = '<i class="fa fa-check fa-2x"></i>';
    }
}

for (row = 0; row < table.rows.length; row++) {
    currentRow = table.rows.item(row);

    ...

    returncode = save_row();

    btn = currentRow.getElementsByClassName('record-save')[0].firstElementChild;
    if (returncode == 0) {
        iconToggle();
        setTimeout(iconToggle, 2000);
    }
}

const-icontogle=（）=>{
const isCheckIcon=btn.firstElementChild.classList.contains（'fa-check'）；
如果（isCheckIcon）{
btn.innerHTML=''；
}否则{
btn.innerHTML=''；
}
}
对于（行=0；行

编辑：

$（'.table全部保存'）。在（'click'，'i'，function（）上{
var table=document.getElementById（'edit_history_table_body'）；
常量图标切换=（abtn，状态）=>{
如果（状态=“保存”）{
abtn.innerHTML=''；
}否则，如果（状态==“检查”）{
abtn.innerHTML=''；
}
}
var currentRow、key、TotalNoBreakDec、OvertimeDec、TotalDec、StartDec、HourSchedule、returncode、btn；
//循环浏览表格的每一行。
对于（行=0；行{iconToggle（btn，“save”）}，2000；
}
}
btn=document.getElementsByCassName（'table-save-all'）[0].firstElementChild；
i切换（btn，“检查”）；
setTimeout（（）=>{iconToggle（btn，“save”）}，2000；
});

您应该将要更改为参数的

btn

传递到

iconToggle（）

方法中。当前，您的循环将抛出所有按钮并重新分配--看似全局--

btn

变量。因此，一旦重置图标的超时触发，

btn

可能被分配到最后一个按钮，在超时中多次调用

icontogle

，只需切换此按钮即可

此外，我建议将所需的状态传递到

icontogle

方法中，以便始终清楚发生了什么变化，并且错误调用

icontogle

不会以不需要的方式更新接口

const iconToggle = (abtn, state) => {
    if (state == "save") {
        abtn.innerHTML = '<i class="fa fa-save fa-2x"></i>';
    } else if (state == "check") {
        abtn.innerHTML = '<i class="fa fa-check fa-2x"></i>';
    }
}

在循环体内部，而您只有

btn = ... 

因此，这行代码

setTimeout(() => {iconToggle(btn, "check")}, 2000);

在您的版本中，将有一个对

btn

变量的引用，该变量在循环主体之外的某处声明（您不显示在何处）。但是，当您在循环迭代期间以及循环之后不断更新此

btn

变量时，

btn

最终指向此元素

 btn = document.getElementsByClassName('table-save-all')[0].firstElementChild;

这就是元素，超时回调中的所有

iconToggles

都应用于

在循环体中声明

btn

变量，或者更好地在

if

的体中声明，它将工作

if (returncode == 0) {
    const btn = currentRow.getElementsByClassName('record-save')[0].firstElementChild;
    iconToggle(btn, "save");
    setTimeout(() => {iconToggle(btn, "check")}, 2000);
}

---

应在尽可能小的范围内定义所有变量，以防止此类错误。

icontoggle函数如何获取

btn

变量？看起来你没有把btn传给itI，我编辑了我的原始帖子，里面有更多的信息和建议的修改。但结果还是和我原来的问题一样。行级别的按钮不会更改回原来的位置。@S.J.请查看更新的答案…我明白了。作为一个“创造性”的JS用户，这非常有帮助，我学到了一些东西：）我还注意到使用

var

仍然不起作用，但是

const

起作用。这是因为var覆盖并将执行时声明的所有内容保存在内存中吗？

setTimeout(() => {iconToggle(btn, "check")}, 2000);

 btn = document.getElementsByClassName('table-save-all')[0].firstElementChild;

if (returncode == 0) {
    const btn = currentRow.getElementsByClassName('record-save')[0].firstElementChild;
    iconToggle(btn, "save");
    setTimeout(() => {iconToggle(btn, "check")}, 2000);
}