setTimeout and QuickTabs

Question

I'm using QuickTabs with a couple of views to show some content within tabs. This works fine.

Now, I want my tabs to automatically cycle. Basically, this issue sums up what I want to do.

The thing is, it partially works. I have two tabs, and it cycles to the second tab, but immediately goes back to the first. I have enough time to see it blinking, but that's it.

Here is the slightly modified code (original code does the same, I just find it nicer):

var rotateSpeed = 5000;
setTimeout(function featureRotate() {
  var active_tab = $('ul.quicktabs-style-basic').find('li.active')
  var next_tab = active_tab.next()
  if(next_tab.length){
    next_tab.find('a').trigger('click')
  }
  else {
    /* remove the following line if you don't want it to cycle */
    $('ul.quicktabs-style-basic').find('li.first a').trigger('click')
  }
  setTimeout(featureRotate, rotateSpeed);
}, rotateSpeed);

Debugging it, it looks like the setTimeout function works when it goes through the else statement, but not when it goes through the if one.

Answer 1

Alright, the problem was just plain old Javascript.

The bug made it look like the setTimeout had no delay parameter, which defaults to 0.

After looking more at it, the rotateSpeed variable was not available in the block scope of the featureRotate function, but in its closure.

So I replaced the following:

// In the featureRotate function
setTimeout(featureRotate, rotateSpeed)

With:

// In the featureRotate function
setTimeout(featureRotate, this.rotateSpeed) // Look at this magic :-)

And it works perfectly!

Answer 2

You could use setInterval() insead:

function featureRotate() {
  var active_tab = $('ul.quicktabs-style-basic').find('li.active')
  var next_tab = active_tab.next()
  if(next_tab.length){
    next_tab.find('a').trigger('click')
  }
  else {
    /* remove the following line if you don't want it to cycle */
    $('ul.quicktabs-style-basic').find('li.first a').trigger('click')
  }
}

var rotateSpeed = 5000;
setInterval("featureRotate()", rotateSpeed);