是否可以推迟某些 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()。焦点处理程序取消超时以阻止函数调用。您可以调整延迟以使其显得更直接，但根据您的要求，它必须是异步的。

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