Question

标题可能不太清楚，但我尝试使用示例解释我的问题。我的函数可能需要相当长的时间来执行，所以我想在执行此函数时通知用户。我希望在函数启动时显示通知，并在函数结束时删除它。这种方法正是我想要的：

function foo()
{
   var r = document.getElementById('id');
   r.innerHTML = 'processing...';
   reallyLongFoo();
   r.innerHTML = 'done!';
}

但我更喜欢通过其他功能更改通知。像那样：

function foo()
{
   changeInfo('processing...');
   reallyLongFoo();
   changeInfo('done!');
}
function changeInfo(info)
{
   var r = document.getElementById('id');
   r.innerHTML = info;
}

但是这个版本没有正常工作。价值＆＃39;结果＆＃39;不会改变，直到功能结束，直接完成！＆＃39;，跳过＆＃39;处理......＆＃39;

我猜测两个changInfo函数都是在foo之后执行的。如何强迫他们立即执行？

Answer 1

通过添加回调尝试以下内容。

function foo()
{
   changeInfo('processing...');
   reallyLongFoo(function() {
      changeInfo('done!');
   });

}
function changeInfo(info)
{
   var r = document.getElementById('id');
   r.innerHTML = info;
}

function reallyLongFoo(callback)
{
   //Put all your codes

   callback();
}

Answer 2

配合，你可以使用jquery承诺或类似的东西来实现这一点，但它不是那么好，它们不是原生实现的，你能做的最好的事情是将第二个changeInfo作为回调你的long foo，在完成dom操作后调用它。

当你在一个方法中放入两个方法调用时，无论需要多长时间，它们都会执行并返回，但在一个方法中，所有单行代码都以同步模式执行。

    function foo()
{
   changeInfo('processing...');
   reallyLongFoo(function() {
      changeInfo('done!');
   });

}
function changeInfo(info)
{
   var r = document.getElementById('id');
    r.innerHTML = info;
}

function reallyLongFoo(callback)
{
   //Put all your codes

   callback();
}

只需参考Deepak的代码，但同样的想法！

当使用函数来改变值时，innerHTML不会立即起作用

2 个答案: