waitForKeyElement.js But with a max wait time

Question

When using waitForKeyElement.js I was wondering if there is a good solution to implementing a max time to wait? Sometimes I have elements that are supposed to be there, but sometimes on a poor ajax response they do not appear, or they may take a while to appear. In cases like that I simply want it to move on and execute a separate function.

Edit: For example, when trying to "buy" an item it typically always responds with a "success" box which is what the program is waiting for, however sometimes this box does not happen if the server has an error or if the item is no longer available to "buy" in which case a different error element may be inserted instead, however this is a different element and as such it continues to wait instead of continuing on to process the next item.

Answer 1

The question does not have an example use case, nor MCVE. There's a good chance that it is an XY Problem.

That said, there's no elegant way to set a max wait time ^{(because there's never been neither a need, nor a demand for one before)}.

You can get the effect with code like:

const maxTime       = 5;  //  seconds
var watchdogTimer   = setTimeout (fallBackFunc, maxTime * 1000);
waitForKeyElements ("#foo", desiredFunc, true);

function desiredFunc (jNode) {
    console.log ("Foo found!");
    clearTimeout (watchdogTimer);
}
function fallBackFunc () {
    console.log ("Oh, poo. No foo.");
}

---

Unloading the waitForKeyElements timer in such a scenario should not be necessary, but you can also do that by adding the following code at the end of fallBackFunc():

function fallBackFunc () {
    console.log ("Oh, poo. No foo.");

    /*-- Optional body double to take fire from waitForKeyElements that the 
        has `true` parameter set.  This is almost never needed.
    */
    var nonce = "IdeallySomeGloballyUniqueStringThatIs_a_ValidCssClass";
    //-- Added node should have properties that match the WFKE selector
    $("body").append (`<span id="foo" class="${nonce}" style="display:none;">blah</span>`);
    setTimeout (function () {$(`.${nonce}`).remove(); }, 333); // time must be > 300
}

---

---

Regarding the question edit:

... (the page) responds with a "success" box which is what the program is waiting for, however sometimes this box does not happen... in which case a different error element may be inserted instead...

The usual practice for that is to set waitForKeyElements to listen for both the success node and the error node. (See jQuery selectors doc.)

The waitForKeyElementscallback would then take the appropriate action for the type of node passed to it.
No watchdog timer is needed (unless the page can stay active and yet not return either node type -- which is almost never the case).

For example:

waitForKeyElements ("#goodNode, #errorNode", completeTransaction, true);

function completeTransaction (jNode) {
    if (jNode.is ("#goodNode") ) {  //  Match one of the WFKE selectores
        console.log ("Transaction success!");
    }
    else {
        console.log ("Transaction error.");
    }
}

As a bonus, this approach: (A) doesn't have to wait for a max timer to run out and (B) is not subject to breaking if max timer is not set long enough for every circumstance.