Question

我有以下HTML代码

<li><div><..><input type="submit" ...></div></li>

我在按钮上添加了一个点击事件，以删除整个<li>。有时这个过程需要1/2秒。我希望在处理删除I代码时包含带有等待图标的消息：

   var $li = $(btnRemove).closest('li').empty();

    // Add Please wait
    var $logo = $('<img>').attr('src', 'logo.gif');
    var $tblWait = $('<table />').append(
            $('<tr />').stop()
            .append($('<td/>').append($logo))
            .append($('<td/>').html(' Pleasee wait while removing table'))
            );
    $li.append($('<div/>').append($tblWait));

..... Process and do other tack and finally
$li.remove();

如果我提出断点，我会看到徽标＆amp;和消息，但没有断点，L1将在1/2秒后删除，但消息既不会显示徽标。我尝试在页面就绪事件上加载图像，但徽标非常小，不需要任何时间加载。任何帮助将不胜感激。

Answer 1

这是由于JavaScript的性质和共享相同线程的DOM。对DOM进行任何更改后，UI将不会重新绘制，直到线程完成。该过程可能如下所示：

(idle) -> Event fires -> JavaScript code executes -> Repaint GUI -> (idle)

为了显示消息，您需要使用计时器延迟长进程：

$li.append($('<div/>').append($tblWait));

window.setTimeout(function () { 
    //... Process and do other tack and finally
    $li.remove();
}, 0);

显示等待图像

1 个答案: