javascript - How to handle click event being called multiple times with jquery animation? -

javascript - How to handle click event being called multiple times with jquery animation? -

i have click event has jquery animation in it. how can guarantee animation has finished when multiple click events beingness fired.

$(this._scrollbartrack).click(function(e) { if(e.target === && _self._horizontalclickscrollingflag === false){ _self._horizontalclickscrollingflag = true; if(_self._isvertical){ } else{ //horizontal if(e.offsetx > (this.firstchild.offsetwidth + this.firstchild.offsetleft)){ // moving towards right var scrollableamounttomove = _self._arrayofcellsizes[_self._scrollbarcurrentstep + 1]; // additional amount move var scrollablecurrentposition = -($(_self._bodyscrollable).position().left); var scrollbarcurrentposition = $(_self._scrollbartrackpiece).position().left; var scrollbaramounttomove = _self.getscrollbartrackpiecepositionbasedonscrollableposition(scrollableamounttomove); $(".event-scroll-horizontally").animate({left:-(scrollablecurrentposition+ scrollableamounttomove)}); $(_self._scrollbartrackpiece).animate({left: (scrollbarcurrentposition + scrollbaramounttomove)}); _self._scrollbarcurrentstep += 1; } else{ var scrollableamounttomove = _self._arrayofcellsizes[_self._scrollbarcurrentstep - 1]; // additional amount move var scrollablecurrentposition = -($(_self._bodyscrollable).position().left); var scrollbarcurrentposition = $(_self._scrollbartrackpiece).position().left; var scrollbaramounttomove = _self.getscrollbartrackpiecepositionbasedonscrollableposition(scrollableamounttomove); $(".event-scroll-horizontally").animate({left:-(scrollablecurrentposition - scrollableamounttomove)}); $(_self._scrollbartrackpiece).animate({left: (scrollbarcurrentposition - scrollbaramounttomove)}); _self._scrollbarcurrentstep -= 1; } } _self._horizontalclickscrollingflag = false; } });

jquery has hidden (i'm not sure why it's not in docs someplace) variable $.timers can test against.

i made function long time ago handle situations this. mind you, test create sure there no animations beingness executed.

function animationstest (callback) { var testanimationinterval = setinterval(function () { if ($.timers.length === 0) { // page animations finished clearinterval(testanimationinterval); callback(); // callback function } }, 25); };

useage: jsfiddle demo

animationstest(function () { /* code here run when no animations occuring */ });

if want test against 1 individually class/data route.

$('#thing').addclass('animating').animate({ left: '+=100px' }, function () { // callback when animation finished $(this).removeclass('animating'); });

javascript jquery css