Javascript 在angularjs指令创建循环中重置作用域间隔

在我的agnularjs指令中，我有一个包含脚本逻辑的对象

$scope.slider = {
    increment: 0,
    step: 1,
    positionTop: 0,
    init: function (step, isClick) {
        if(isClick) clearInterval($scope.interval);
        ...rest of script...

然后在下面，关闭$scope.slider后}我有这个代码

$timeout(function () {
    $scope.slider.changeSlide($scope.slider.step);
    $scope.interval = setInterval(function () {
        $scope.slider.step++;
        if($scope.slider.step === 5) $scope.slider.step = 1;
        $scope.slider.changeSlide($scope.slider.step);
    }, 5000);
});

在页面加载时，我将开始init方法工作，然后当用户额外单击此html标记时

<span class="main__last-added-dot"
      data-ng-class="slider.step == 1 ? 'main__last-added-dot--active' : ''"
      data-ng-click="slider.init(1, true);"></span>

低于$scope.slider对象：

但它产生了某种循环，我真的不知道它工作得很奇怪

我做错了什么？如何停止此间隔并重新开始，在span单击后，我想将秒数清除为0

---

我添加。

您应该在init中命名函数并重置其间隔，如下所示：

$scope.slider = {
    increment: 0,
    step: 1,
    positionTop: 0,
    init: function (step, isClick) {
        if(isClick) clearInterval($scope.interval);
        $scope.interval = setInterval(intervalSlide, 5000); // Reset interval here
        ...rest of script...
};

// Name your function, no need to attach it to $scope
function intervalSlide() {
    $scope.slider.step++;
    if($scope.slider.step === 5) $scope.slider.step = 1;
    $scope.slider.changeSlide($scope.slider.step);
}

$timeout(function () {
    $scope.slider.changeSlide($scope.slider.step);
    $scope.interval = setInterval(intervalSlide, 5000);
});

---

您可以在下面的代码中执行类似的操作，也请检查给定场景的工作示例

指令：

---

你能用这个问题场景创建plunker吗？是的，但是它会有很多代码，因为这个指令大约有100行。好的，我试着让它尽可能简单。这个步骤对于我的水平幻灯片的登录基本上是赤裸裸的。你为什么在changeSlide中调用init？您已经设置了一个间隔，而不是超时，所以它可以自行循环。当我在init中删除changeSlide时，它在页面加载后将不会开始工作。我使用$timeout是因为我将进行异步调用，并且需要等待记录显示，以便稍后将它们收集到节点列表中$timeout就可以了。我的意思是：使用SoC实现你的功能。初始化只应初始化计时器，更改幻灯片只应更改幻灯片。然后，当你需要的时候，就可以很容易地调用你需要的东西。

$timeout(function () {
    $scope.startInterval = function() {
        $scope.interval = setInterval(function () {
            console.log('fire function interval');
            $scope.slider.step++;
            if($scope.slider.step === 5) $scope.slider.step = 1;
            $scope.slider.changeSlide($scope.slider.step);
        }, 5000);
    };
    $scope.startInterval();
});

$scope.slider = {
    increment: 0,
    step: 1,
    positionTop: 0,
    init: function (step, isClick) {
        if(isClick) clearInterval($scope.interval);
        $scope.interval = setInterval(intervalSlide, 5000); // Reset interval here
        ...rest of script...
};

// Name your function, no need to attach it to $scope
function intervalSlide() {
    $scope.slider.step++;
    if($scope.slider.step === 5) $scope.slider.step = 1;
    $scope.slider.changeSlide($scope.slider.step);
}

$timeout(function () {
    $scope.slider.changeSlide($scope.slider.step);
    $scope.interval = setInterval(intervalSlide, 5000);
});

app.directive('myElement', ['$interval', '$timeout',
  function($interval, $timeout) {
    return {
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope) {
        scope.timer=5000;
        scope.step = 1;
        function updateTime() {
          if(scope.step==4) scope.step=0;
          scope.step++;
        }
        scope.stopTime = $interval(updateTime, scope.timer);
        scope.resetTimer=function(step){
          scope.step = step;
          $interval.cancel(scope.stopTime);
          scope.stopTime = $interval(updateTime, scope.timer);
        }
      }
    }
}]);