Question

我很抱歉，如果之前已经提出这个问题，我已经尝试过搜索，并且不认为我正在进行正确的措辞。

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

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

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

但是，我不知道如何实现上述优雅。我知道如何通过可怕的黑客进行上述操作，但不知道如何做得好。此外，如果在多个文件加载后有更好的方法来触发功能，请告诉我。

Answer 1

如果你坚持两个事件，你可以做这样的事情（它有点麻烦，但我认为这是一个很好的方法...运行片段看看这行得通）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: