javascript - 覆盖 div 不会阻止在特定时间窗口中触发的下一个事件

Question

在我的应用程序中，我添加了一个 loaderDiv 来避免页面上的所有用户事件。

加载程序出现。如果用户强制执行 clickevent(例如 greenContainer onclick)，该事件将在加载器 div 消失后触发。

我创建了一个简短示例来向您展示问题

js:

function appendOverlay(){
    var maskDiv = $('<div id="overlay" class="loadmask" onclick:"return false;"><div class="removeDiv" onclick="sleep(3000)"><span>click to remove overlay after 3 seconds</span></div></div>');
        $('body').append(maskDiv);
    }

    function removeDiv(){
        $("#overlay").remove();
    }

    function sleep(milliseconds) {
      var start = new Date().getTime();
      for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
          break;
        }
      }
      removeDiv();
    }

Demo

我该如何解决这个问题？

---

使用 setTimeout(removeDiv(),0) 解决了这个问题。这是 Javascript 中事件循环执行的问题。

将 removeDiv() 应用到下一个 tick，首先执行 userEvent onClick()。

Why is setTimeout(fn, 0) sometimes useful?

The JavaScript Event Loop

Answer 1

那里有奇怪的“ sleep ”功能。你为什么不使用内部超时:

function sleep(milliseconds) {
    setTimeout(function() {
         removeDiv();   
    }, milliseconds);
}

DEMO