Javascript 如何在angularjs中清除$timeout

我有这个代码的图像滑块和下一个prev和自动更改图像功能

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

scope.next=函数（）{
scope.currentIndex0？scope.currentIndex-：scope.currentIndex=scope.images.length-1；
};
作用域：$watch（'currentIndex'，函数（）{
scope.images.forEach（函数（图像）{
image.visible=false；
});
scope.images[scope.currentIndex].visible=true；
});
无功定时器；
var sliderFunc=函数（）{
计时器=$timeout（函数（）{
scope.next（）；
计时器=$timeout（sliderFunc，5000）；
}, 5000);
};
sliderFunc（）；
作用域：$on（“$destroy”，函数（）{
$timeout.cancel（计时器）；
});

在滑块模板中，我有下一个和上一个函数的箭头链接

  <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>

我只想在用户点击下一个或上一个btn时添加clear$timeout功能，每次用户点击下一个或上一个btn时，计时器都是清除的，并在5秒后更改图像

这是关于你的完整文档

---

我为这个

创建了JSFIDLE，您可以通过从

$scope设置超时来完成。下一步

通过检查标志来实现

标记

<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>

代码

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
}

var定时器；
var sliderFunc=函数（）{
计时器=$timeout（函数（）{
范围。下一个（假）；
}, 5000);
};
scope.next=函数（setTimeoutToNext）{
scope.currentIndex

这是我的第三次尝试：

var timer=$interval（函数（）{
scope.changeImage（）；
}, 5000);             
scope.next=函数（）{
$interval.cancel（计时器）；
计时器=$interval（函数（）{
scope.changeImage（）；
}, 5000);                 
};
scope.changeImage=函数（）{
scope.currentIndex

---

希望这能对你有所帮助。

你好@Roman和@Pankaj坦克，非常感谢你的帮助。。。 使用此代码修复：

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

在@Roman的版本中编辑

---

Tanx guy…

为什么在超时内使用超时？也许你应该使用$interval？请在JSFiddle中这样做嗨，不幸的是note解决了这个问题，我为此创建了JSFiddle。请看一下，并在tanx@SydAmir中修复了编辑。现在它修复了我写了不同的行，而不是

$timeout.cancel（timer）

tnx，但是你取消了计时器，在使用下一个btnI时没有自动更改图像。我不明白你的意思。当我点击下一个btn时，一个图像改变了一次，间隔被取消。请看，当我们点击下一个btn时，我们希望间隔被清除，当我们多次点击下一个btn时，间隔在5秒钟内没有被清除，我们点击下一个，在第二个间隔中改变的图像也改变了图像，因此，2个图像是幻灯片事实上，我们希望每次单击下一个btn时，间隔是停止并再次重新启动，并在5秒钟后更改图像

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