javascript - 是否可以推迟某些 JavaScript 函数的执行，直到浏览器事件完全处理完毕为止？

Question

例如，我需要在处理 onblur/onfocus 事件时执行一些函数(一个元素失去焦点，另一个元素获得焦点)。

更具体地说，我有如下内容。

<div id="foo" tabIndex="1" onblur="document.getElementById('bar').style.display = 'none';">foo</div>
<div id="bar" tabIndex="2" onclick="alert('bar');">bar</div>
<div>stuff</div>

假设元素“foo”获得焦点。当“foo”失去焦点时，我应该隐藏元素“bar”。但如果我点击“栏”，我应该会看到警报。它不起作用，因为处理 onblur 事件后，元素“bar”不可见，并且 onclick 和 onfocus 都不会发生。

Answer 1

只需在代码中管理它即可。

<script type="text/javascript">
var blurTimeout;
function Blur(el)
{
    blurTimeout = setTimeout(function() 
    {
        SomeFunction();
    }, 500);
}
function Focus(el)
{
    if (blurTimeout)
        cancelTimeout(blurTimeout);
}
</script>
<input id="input1" type="text" onblur="Blur(this);" />
<input id="input2" type="text" onfocus="Focus(this);" />

编辑:

已更新。现在您只需将 Focus 处理程序附加到一个元素。

Blur 处理程序设置 1/2 秒超时，该超时将调用 SomeFunction()。 Focus 处理程序取消超时以阻止函数调用。您可以调整延迟以使其显得更即时，但根据您的要求，它必须是异步的。

这是一个相当笨拙的解决方案。如果我发现自己在生产代码中编写此内容，我会重新考虑设计或(如果可能)重新审视需求。