JavaScript 用于在某些事件发生后执行函数

JavaScript to execute a function after certain events have occurred?

本文关键字：执行 函数 事件 用于 JavaScript      更新时间：2023-09-26

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

我有两个文件通过 AJAX 加载，在加载两个文件之前我不想执行函数。

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

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

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

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

// 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>

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

相关文章：