使用Jquery / Javascript找到元素后如何运行函数

Question

Is there a way I can run a function once after a specific element has been found?

I tried this:

setInterval(function () {
     if ($('.imagewrapper').length) {
            self.carousel();
     }    
}, 1000)

So, it checks my page continiously if the .imagewrapper element exisit, and if so, it should run the self.carousel() function. The problem is, that this way, as soon the element exists, it runs the function continiously. Is there a way around?

ps: The setInterval -method needs to be there.

Answer 1

Try:

(function delay() {
   if ($('.imagewrapper').length) {
       self.carousel();
   } else {
       setTimeout(delay, 1000);
   }
})();

or if you need setInterval:

var interval = setInterval(function() {
   if ($('.imagewrapper').length) {
       self.carousel();
       clearInterval(interval);
   }
}, 1000);

Answer 2

It's easy:

// set ran to false when you load the page
ran = false;
setInterval(function () {
  // only do your stuff when you haven't do yet (ran==false)
  if (!ran && $('.imagewrapper').length) {
    self.carousel(); 
    // when you did it for the 1st time set ran to true, so next time you don't enter the if.
    ran = true;
} }, 1000)

// but even better to stop the timer after you entered the if for the 1st time:
timer = setInterval(function () {
  // only do your stuff when you haven't do yet (ran==false)
  if ($('.imagewrapper').length) {
    self.carousel(); 
    // when you did it for the 1st time delete the timer
    clearInterval(timer);
} }, 1000)

Answer 3

You looking for waitUntilExists https://gist.github.com/buu700/4200601 So, it will works something like that:

$(someselect).waitUntilExists(function(){
    var that = $(this);
    // do some code
})