jQuery 计时 - 想要在方法中添加类似于 DoEvents() 的内容

Question

我有一个包含大约 260 行的数据表。这些行中的每一行都由一个属性（例如parentHeaderName）来标识。当单击该表的标题时，我有一些 jQuery 可以将标题短暂更改为 ajaxload.gif 图像，如下所示，

$('#Header').html('<img src="images/ajaxload.gif"');

然后我通过调用来切换所有 260 行

$([parentHeaderName=something]).toggle();

不幸的是，我无法获取我的部分将标头更改为 ajaxload.gif 的代码才能正常运行。就好像该语句和切换语句同时运行。这意味着用户永远看不到 ajaxload.gif。我可以显示图像的唯一方法是在两个语句之间放置一条警报（'...'）消息。显然，这不是我们所希望的解决方案。我尝试使用delay()和setTimeout没有效果。我想我需要的是 jQuery 或 javascript 中的某种 DoEvents 等效项，它可以让图像在切换执行之前显示。

有什么想法吗？

谢谢， 克里斯

更新：感谢大家的反馈。这是实际的代码：（

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

此代码实际上将标头更改为expand.gif或collapse.gif，而不是ajaxload.gif。）

我确实尝试了延迟建议

$(jq2).delay(500).toggle();

，但它没有任何帮助。当需要切换的行数很小时（例如，最多大约 20 行）时，没有问题。但在某些情况下，我需要隐藏一堆（例如 260），就好像浏览器需要几秒钟来浏览 DOM 来完成所有隐藏的事情。这就是为什么我最初希望使用 ajaxload.gif 图像。

谢谢， 克里斯

Answer 1

感谢大家的帮助。事实证明，问题更多地出在toggle() 语句上，而不是其他任何地方。 .toggle() 处理如此多的记录是导致浏览器挂起的原因，无论我在 .delay()、.when() 等方面做了什么。我最终直接执行了 .hide() 和.show()，这些更改加快了预期行为的速度。为了确定当前的可见性（从而知道是否应该 .hide() 还是 .show()），我检查了第一个匹配元素的可见性，例如 $(criteria:first:visible) 并进行适当的处​​理。

再次感谢，并致以最诚挚的问候。

——克里斯

Answer 2

我的第一个想法是，这种切换发生得太快了，您甚至根本不需要 ajaxload.gif。那么，如果是这样的话，那是一件好事，对吗？

我的第二个想法是如何用任何标题文本重新替换 ajaxload.gif...这个回调何时以及如何发生？

我的第三个想法是，一切都发生得非常快，这很好，但无论如何你仍然想向加载程序显示......如果是这种情况，请将 .delay(500) 或任何时间量放入你的链中，应该让它保持。我觉得还有更多你没有展示的代码，你能展示一下吗？

这是我同时尝试的快速想法......

$( function(){
    var header = $('#Header');
    header.bind('click', function(){
        $(this).html('<img src="images/ajaxload.gif">');
        $([parentHeaderName=something]).delay(500).toggle();
    });
});

现在这实际上会使切换在触发之前等待，因此，您可能希望将延迟放在链上，该延迟发生在您用 ajaxload.gif 替换之前再次标题文本...

我希望这在某种程度上有所帮助，否则请给我更多信息，我很乐意进一步查看。

编辑：

好的，现在我认为这与图像未加载有关，并且警报给这些图像时间加载。因为这些图像首先不在页面上，所以在加载它们之前页面没有引用它们，所以这可能会扰乱你的时间......也许尝试进行加载，然后在回调中设置你的click...如果您使用的是 jquery 1.5，什么时候可能会有所帮助...

$.when( $('<img src="images/collapse.gif" />').load(), $('<img src="images/expand.gif" />').load() ).then( clickSetUp );

clickSetUp 是您的单击功能...

尝试一下，我会在附近:)