How to run a function if the parent event has been running for longer than a period of time

Question

I have an audio event that in the buffering is not loading quickly, i want to change some events.

so in audio, if the event 'waiting' is triggered do nothing unless it takes more than 5 seconds. Then run function X.

Here is a sample code:

$(audio).on("waiting", function () {
    // RUN AFTER 5 SECONDS
    console.log("This is taking way too long! Lets panic..");
    $play.append('<div class="icon-loading"></div>');
});

$(audio).on("playing", function () { 
    // This is the function that runs after wait is over
    console.log("Wait is over, it is loaded!");
    $play.append('<span class="icon-play-button"></span>');
});

Thanks in advance.

Answer 1

Use setTimeout and clearTimeout as follows

let waitingTimeout;
$(audio).on("waiting", function() {
  // RUN AFTER 5 SECONDS
  waitingTimeout = setTimeout(() => {
    console.log("This is taking way too long! Lets panic..");
    $play.append('<div class="icon-loading"></div>');
  }, 5000);
});

$(audio).on("playing", function() {
  if (waitingTimeout) {
    clearTimeout(waitingTimeout);
    waitingTimeout = null;
  }
  // This is the function that runs after wait is over
  console.log("Wait is over, it is loaded!");
  $play.append('<span class="icon-play-button"></span>');
});