JavaScript執行順序錯誤

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 （以及將來的所有計算）最終退出並放棄對執行線程的控制時，瀏覽器將注意到某些屬性已更改，並在必要時重新繪制（但不是，因為元素設置為不可見，現在仍設置為不可見）。

改為這樣做：

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

這會將$x設置$x隱藏，然后安排超時，然后退出。 瀏覽器瀏覽一下，看到按順序重塗，並顯示您的覆蓋圖。 然后，超時的函數開始運行，執行較長的操作，然后將$x設置$x再次隱藏。 退出時，瀏覽器會再看一遍，看到需要重新粉刷，並且隱藏了疊加層。