javascript - 如何向此 JavaScript 函数添加超时参数？

Question

我有以下 JavaScript 函数。

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

它基本上等待 DOM 元素存在。如果不是，则等待更多 interval 毫秒。 我想要的是添加一个 timeout 参数。如果函数总共等待timeout毫秒并且DOM元素仍然没有出现，那么什么也不做，停止等待并返回。由于该函数的递归性质，我无法使其工作。我也考虑过使用全局变量，但这似乎不是正确的方法。希望有人能指出我正确的方向。

Answer 1

这对我有用

如果增加stopAfter，代码将运行到结论

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>