CODEWITHSUNDEEP
javascriptangularjsasynchronoustimeoutangularjs-timeout
Syd Amir
Syd Amir

Reputation: 475

How can clear $timeout in angularjs

I have this code for image slider and next prev and auto change the image function

scope.next = function () {
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
};

scope.prev = function () {
    scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
};

scope.$watch('currentIndex', function () {
    scope.images.forEach(function (image) {
    image.visible = false;
    });

    scope.images[scope.currentIndex].visible = true;
});

var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next();
        timer = $timeout(sliderFunc, 5000);
    }, 5000);
};

sliderFunc();

scope.$on('$destroy', function () {
    $timeout.cancel(timer);
});

and in slider template I have the arrows link for next and prev function

  <div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next()">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
  </div>

I just want to add clear $timeout function when user click on the next or prev btn and each time the user click on the next or prev btn the timer was clear and change image in 5s later.

this is the full doc about image slider

I create the JSFiddle for this please look at this

Upvotes: 3

Views: 6342

Answers (3)

Syd Amir
Syd Amir

Reputation: 475

Thanks @Roman and @Pankaj for helping. I fixed it with this code:

scope.next = function() {
    $interval.cancel(timer);
    scope.changeImage(); // just add this line
    timer = $interval(function() {
        scope.changeImage();
    }, 5000);
};

In this version of @Roman edited.

The Final version

Upvotes: 2

Roman Koliada
Roman Koliada

Reputation: 5082

This is my third try: https://jsfiddle.net/koljada/8cLw6wch/22/

var timer = $interval(function () {
    scope.changeImage();
}, 5000);

scope.next = function () {
    $interval.cancel(timer);

    timer = $interval(function () {
        scope.changeImage();
    }, 5000);
};

scope.changeImage = function () {
    scope.currentIndex < scope.images.length - 1
        ? scope.currentIndex++
        : (scope.currentIndex = 0);
};

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You could do by setting timeout from $scope.next function by checking a flag.

Markup

<div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next(true)">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
</div>

Code

var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next(false);
    }, 5000);
};

scope.next = function(setTimeoutToNext){
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
    if(setTimeoutToNext)
      $timeout.cancel(timer); //here it will clear the timeout
}

Working Fiddle

Upvotes: 2

Related Questions