Question

我必须使用带有select元素的网站（票证系统），该元素包含当前的9994选项。这是不可更改的，必须按原样接受。

当我在该网站上处理故障单时，我必须从该选择中选择一个特定条目。我有大约30个条目，我必须选择。我不关心其他条目。

对于RegEx过滤器，可以将所需的30个条目分成3个模式。

所以我决定使用Greasemonkey + JQuery来清理那个选择元素，这样我就可以轻松快速地找到我要查找的条目。

过滤工作正常，但需要时间（当然它确实...），所以我想显示一点“请等待”div作为叠加，而过滤器正在运行以提供某种用户反馈

在页面加载时，我创建了叠加层：

$("body").append('<div id="pleaseWaitOverlay" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgb(255,255,255);">HALLO WELT</div>');
$("#pleaseWaitOverlay").hide();

//This is the select element with the "few" entries
fixedInReleaseElement = $('select[name=resolvedReleasePath]');

//Adding buttons to filter for one of the patterns are also added on page load

如果我按下其中一个过滤器按钮，将调用以下功能：

function filterFixedInReleaseList(filterFor) {
    $("#pleaseWaitOverlay").show();
    //$("#pleaseWaitOverlay").show().delay(500).show(); - or as hack without success...

    var pattern;

    //Based on "filterFor" parameter, the required pattern will be used.
    // [MORE CODE]

    fixedInReleaseElement.find("option").each(function() {
        var currentOption = $(this);
        if (pattern === "") {
            currentOption.show();
        }
        else {
            if (pattern.test(currentOption.text())) {
                currentOption.show();
            }
            else {
                currentOption.hide();
            }
        }
    });

    //$("#pleaseWaitOverlay").hide();
}

但不知何故，过滤器将会发生，然后显示叠加层。

请注意：

目前，.hide（）行已被注释掉，因为弹出窗口根本不会显示（或更确切地说是这些）。
.show（）。delay（500）.show（）试图破解它，但它绝对没有改变。我也试过fixedInReleaseElement.find（“option”）。delay（1000）.each（）没有成功。我觉得延迟根本不起作用？

那么，这里有什么问题？为什么在执行过滤器后显示叠加层？

可在此处找到完整的Greasemonkey脚本： http://pastebin.com/auafMSR1

Answer 1

浏览器选项卡只有一个线程，在JavaScript和UI更新之间共享。因此，如果您的JavaScript正在运行，则UI不会更新。

所以，这个：

function doSomethingLongWithOverlayWrongly() {
  $x.show();
  doSomethingLong();
  $x.hide();
}

将设置隐藏的$x的适当属性，然后执行一些操作，然后重新设置属性;当doSomethingLongWithOverlayWrongly（及其未来的所有计算）最终退出并放弃对执行线程的控制时，浏览器会注意到某些属性已更改，并在必要时进行重新绘制（但它是＆＃39; s不，因为元素设置为不可见，现在仍然设置为不可见）。

请改为：

function doSomethingLongWithOverlayCorrectly() {
  $x.show();
  setTimeout(function() {
    doSomethingLong();
    $x.hide();
  }, 0);
}

这会将$x设置为隐藏，然后安排超时，然后退出。浏览器看一看，看到重新排列顺序，并显示您的叠加层。然后，timeouted函数运行，做一些事情，并设置$x再次隐藏。当它退出时，浏览器会再看一眼，看到需要重新绘制，并隐藏你的叠加层。

Javascript执行顺序错误

1 个答案: