Javascript 事件計時 + 3rd 方事件，尋找比 setTimeOut() 更好的替代方案

Question

我有以下 HTML 元素堆棧：

<div class="btn-group btnSortAssType" data-toggle="buttons">
    <label class="btn ink-reaction btn-primary active">
        <input type="checkbox" value="m">Model
    </label>
    <label class="btn ink-reaction btn-primary active">
        <input type="checkbox" value="n">Assignment
    </label>
    <label class="btn ink-reaction btn-primary active">
        <input type="checkbox" value="p">Multi
    </label>
</div>

由於上面的按鈕構建不是相互排斥的，我將介紹數組 + 顯示/隱藏元素。

 $('.btnSortAssType').on('click', function (event) {
        let $allLables;
        var assTypeToShow = [];
        $(`.top-row`).hide();
        setTimeout(function () {
            $allLables = $('.btnSortAssType label.active');
            $allLables.each((index, label) =>{
                $(`.top-row[assignment_type="${$(label).find('input').val()}"]`).show();

            });
        })
    });

如果您閱讀 js abpve，您將看到元素檢查通過setTimeout() ，原因是：沒有它，它將錯過最后一次點擊（因此，如果 3 個中有 2 個處於活動狀態，並單擊最后一個未活動的元素仍將顯示 2 活動）。

我認為這是由於我的代碼和 bootstrap.js 之間的事件計時造成的，其中將元素設置為 active 的方法以某種方式出現在我的代碼之后，在我看來，我認為事件循環在事件堆棧中沒有引導程序主動更改，所以我使用了setTimeout() ，我相信等待前一個事件堆棧完成並在（空延遲）之后運行。

使用上述setTimeout()是 100% 無縫的，但我想知道我在這里錯過了什么，因為使用setTimeout()似乎是一個廉價的黑客，我想知道你們在想什么。

非常感謝分享，巴德。

Answer 1

Bootstrap 處理程序附加到文檔，並在冒泡階段運行。 因此，附加到也在冒泡階段運行的文檔后代的事件偵聽器將在Bootstrap 處理程序之前運行：

 $('.btnSortAssType').on('click', function(event) { console.log($('.active').length); });

 .active { color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script> <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m" checked>Model </label> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="n" checked>Assignment </label> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="p" checked>Multi </label> </div>

您也可以通過將事件處理程序附加到文檔並在 Bootstrap 之后運行腳本來修復它（因為附加到同一元素的偵聽器將按照它們附加的順序運行）：

 $(document).on('click', '.btnSortAssType', function(event) { console.log($('.active').length); });

 .active { color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script> <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m" checked>Model </label> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="n" checked>Assignment </label> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="p" checked>Multi </label> </div>