How can clear $timeout in angularjs

Question

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

Why do you use timeout inside timeout? Maybe you shoud use $interval? — Roman Koliada
– Roman Koliada, Commented Aug 13, 2015 at 6:58
please do that in JSFiddle jsfiddle.net/hemedani/8cLw6wch/15 — Syd Amir
– Syd Amir, Commented Aug 13, 2015 at 14:20

ggorlen · Accepted Answer · 2023-08-24 23:27:38Z

3

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);
};

edited Aug 24, 2023 at 23:27

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Aug 13, 2015 at 14:35

Roman Koliada

5,1723 gold badges36 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Syd Amir Over a year ago

tnx, but you cancel the timer and did not change image automatic when using the next btn

Roman Koliada Over a year ago

I don't understand you. When i clicked on the next btn, an image changes once and interval canceled.

Syd Amir Over a year ago

see, we want the interval cleared when we click on the next btn, when we several time click on the next btn the interval did not cleared in the 5s second we clicked the next and image changed in that second interval changed the image too, so 2 imaged was slides

Syd Amir Over a year ago

in fact we want every time we clicked on the next btn the interval was stop and restart again and changed image in 5 second later

Pankaj Parkar · Accepted Answer · 2015-08-13 17:38:05Z

2

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

edited Aug 13, 2015 at 17:38

answered Aug 13, 2015 at 7:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Syd Amir Over a year ago

Hi, unfortunately did note resolve the problem, I created JSFiddle for this please take a look at that and fixed in that tanx jsfiddle.net/hemedani/8cLw6wch/14

Pankaj Parkar Over a year ago

@SydAmir look at the edit..Now it fixed I wrote different line instead of $timeout.cancel(timer)

ggorlen · Accepted Answer · 2024-01-20 04:08:30Z

2

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

edited Jan 20, 2024 at 4:08

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Aug 14, 2015 at 8:45

Syd Amir

4757 silver badges21 bronze badges

Collectives™ on Stack Overflow

How can clear $timeout in angularjs

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related