How to clear the Timeout in Bxslider on OnsliderAfter

Question

I have a bxslider and OnslideAfter the following

onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
      setTimeout(function() {
        jQuery(".active-slide img.drawing_layer_one").animate({ opacity: 1}, 500);
    }, 150);
   setTimeout(function() {
        jQuery(".active-slide img.drawing_layer_two").animate({ opacity: 1}, 600);
    }, 250);
}

So with this i am keeping the order of animations to happen and it is working only on sliderload when slider loads first time. Onslideafter it is not working properly and am thinking that the reason could be that the Timeing didnt cleared. So how i clear this timeout every time OnSlideAfter so the animations will happen in the right order after each other?

Answer 1

You need to declare a global variable and then assign setTimeout to it.

var myTimeout1;
var myTimeout2;
// Code
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
  myTimeout1 = setTimeout(function() {
      jQuery(".active-slide img.drawing_layer_one").animate({ opacity: 1}, 500);
  }, 150);
  myTimeout2 = setTimeout(function() {
      jQuery(".active-slide img.drawing_layer_two").animate({ opacity: 1}, 600);
  }, 250);
}

To clear timeout you must use this:

clearTimeout(myTimeout1);
clearTimeout(myTimeout2);