How can I add a timeout parameter to this JavaScript function?

Question

I have the following JavaScript function.

function ready(interval, last_wait, el, callback) {
    if (jQuery(el).length) {
        console.log("Element ready: " + el)
        setTimeout(function () {
            callback(jQuery(el));
        }, last_wait);
    } else {
        console.log("Waiting element: " + el)
        setTimeout(function () {
            ready(interval, last_wait, el, callback);
        }, interval);
    }
};

It basically waits for a DOM element to exist. If it isn't, waits more interval milliseconds. What I want is adding a timeout parameter. If the function wait timeout milliseconds in total and the DOM element still doesn't appear, then just do nothing, stop waiting and return. I can't make it work because of the recursive nature of the function. I also considered using a global variable, but it seems not the correct way to do it. Hope someone could point me in the right direction.

I updated my answer to stop after 3 attempts

mplungjan
– mplungjan

2019-12-12 09:41:36 +00:00
Commented Dec 12, 2019 at 9:41 — mplungjan
– mplungjan, Commented Dec 12, 2019 at 9:41

mplungjan · Accepted Answer · 2019-12-12 10:04:17Z

1

This works for me

If you increase the stopAfter, the code will run to conclusion

var tId, stopAfter = 3
const cb = el => el.html("Callback called");
function ready(interval, last_wait, el, callback) {
  if (stopAfter === 0) {
    clearInterval(tId);
    return;
  }
  if ($(el).length) {
    clearInterval(tId);
    console.log("Element ready: " + el)
    setTimeout(function() { callback($(el)); }, last_wait);
    return;
  }
  console.log("Waiting element: " + el)
  if (!tId) tId = setInterval(function() {
    stopAfter--;
    ready(interval, last_wait, el, callback);
  }, interval);
};

// testing the above
ready(1000,2000,"#div1",cb)
setTimeout(function() {     
  $("body").append(`<div id="div1">Div1</div>`) }
,5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Dec 12, 2019 at 10:04

answered Dec 12, 2019 at 9:28

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Just a learner Over a year ago

hi @mplungjan, thanks for you answer. Your implement uses stopAfter as a counter and it will wait that many times of interval. What I want is a parameter that will be waited for that long time. They are not exactly the same.

mplungjan Over a year ago

How not? If you wait 3 times 5 sec is it 15 secs!

Just a learner Over a year ago

Uh, yes. Let me think about it. Thanks!

Collectives™ on Stack Overflow

How can I add a timeout parameter to this JavaScript function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related