JavaScript 在某些事件发生后执行函数？答案

【问题标题】：JavaScript to execute a function after certain events have occurred?JavaScript 在某些事件发生后执行函数？
【发布时间】：2026-02-06 12:15:01
【问题描述】：

如果以前有人问过这个问题，我深表歉意，我已经尝试过搜索，但认为我的措辞不正确。

我通过 AJAX 加载了两个文件，我不想在它们都加载之前执行一个函数。

我试图在某些事件发生后执行一个函数。我正在考虑做的伪是这样的：

onEvent(A or B){
    if( eventA.has_occurred AND eventB.has_occurred ){
        do X;
    }
}

但是，我不知道我将如何优雅地实现上述内容。我知道如何用可怕的 hack 来完成上述操作，但不知道如何做好。此外，如果有更好的方法在多个文件加载后触发函数，请告诉我。

【问题讨论】：

您正在寻找使用一种叫做承诺的东西。查看q：github.com/kriskowal/q
另外看看jQuery如何为ajax实现成功回调api.jquery.com/ajaxsuccess
您用于 ajax 的实际代码是什么样的？
你能简单描述一下“可怕的黑客”吗，只是为了防止人们在答案中使用相同的黑客来浪费时间。

标签： javascript ajax events javascript-events event-handling

【解决方案1】：

如果你坚持两个事件，你可以做这样的事情（这有点麻烦，但我认为这是一个很好的方法......运行 sn-p 以查看它的工作）：

// Custom Events
var e1 = new Event('event1');
var e2 = new Event('event2');
// Dispatching Wrappers
var callE1 = function(){ document.getElementById("txt").dispatchEvent(e1); };
var callE2 = function(){ document.getElementById("txt").dispatchEvent(e2); };
// Called by whenDone()
var updateText = function(elt){
    elt.innerHTML = "Done!";
};
// Called after both events
var whenDone = function(e){ 
    // (the text resetting for the second event gets overwritten
    //  by the first one...see below)
    document.getElementById("e1txt").innerHTML = "Done!";
    document.getElementById("e2txt").innerHTML = "Done!";
    updateText(e.target); };
// NOTE: e2 listener (not a typo)
var updateE1 = function(e){
    // Mark e2 as done
    document.getElementById("e2txt").innerHTML = "Done!";
    // Remove the default e1 listener
    e.target.removeEventListener('event1', updateE2);
    // Replace it with a new listener which contains
    //  whatever is to be done after both events
    e.target.addEventListener('event1',whenDone);
};
// NOTE: e1 listener
var updateE2 = function(e){
    // Mark e1 as done
    document.getElementById("e1txt").innerHTML = "Done!";
    // Remove the default e2 listener
    e.target.removeEventListener('event2', updateE1);
    // Replace it with a new listener which contains
    //  whatever is to be done after both events
    e.target.addEventListener('event2',whenDone);
};

// Resets the page... purely for demo purposes
var reset = function(){
    document.getElementById("e1txt").innerHTML = "Waiting...";
    document.getElementById("e2txt").innerHTML = "Waiting...";
    document.getElementById("txt").innerHTML = "Waiting...";
    document.getElementById("txt").removeEventListener('event1', whenDone);
    document.getElementById("txt").removeEventListener('event2', whenDone);
    document.getElementById("txt").removeEventListener('event1', updateE2);
    document.getElementById("txt").removeEventListener('event2', updateE1);
    document.getElementById("txt").addEventListener('event1', updateE2);
    document.getElementById("txt").addEventListener('event2', updateE1);
    // Call events at some random time after up to 10 seconds
    setTimeout(callE1, Math.ceil(Math.random() * 10) * 1000);
    setTimeout(callE2, Math.ceil(Math.random() * 10) * 1000);
};
// Reset every 12 seconds
reset();
setInterval(function(){reset();}, 12000);

(Note: This snippet resets every 12 Seconds)<br/>
Event 1: <div id="e1txt">Waiting...</div><br/>
Event 2: <div id="e2txt">Waiting...</div><br/>
Both:<div id="txt">Waiting...</div>

如果您需要更多个事件，那么事情就会变得有些棘手。您可以让事件调用切换状态布尔值列表的某些成员，或者您可以以某种方式分支此方法。

【讨论】：