创建间隔计时器重置

Question

当我点击查看另一张幻灯片时，interval我的幻灯片的延迟偏移有一个小问题。

例如..我有 10 张幻灯片标识符可见，幻灯片 1 可见，暂停延迟为 5 秒，我单击第 5 张 thumbnail/identifier 滑块将显示第 5 张幻灯片，但延迟偏移因为计时器只会是初始幻灯片后 5 秒的剩余时间。

有什么方法可以为我的函数添加定时器重置或暂停。 Plunkr

$scope.startAuto = function() {
    var timer = $interval(function() {

    if ($scope.jobNotification < $scope.jobs.length -1) {
      $scope.jobNotification += 1;
    } else {
      $scope.jobNotification = 0;

    }

    }, 3000);
};

$scope.isActive = function (index) {
    return $scope.jobNotification === index;
 };

$scope.showJobNotification = function (index) {
    $scope.jobNotification = index;
};

Answer 1

您可以在页面更改时停止和重新启动计时器：

var timer;
$scope.startAuto = function() {
    timer = $interval(function() {
        $scope.jobNotification = ($scope.jobNotification + 1) % $scope.jobs.length;
    }, 3000);
};

$scope.restartAuto = function () {
    if (timer) {
        $interval.cancel(timer);
    }
    $scope.startAuto();
};

$scope.isActive = function (index) {
    return $scope.jobNotification === index;
};

$scope.showJobNotification = function (index) {
    $scope.restartAuto();
    $scope.jobNotification = index;
};

创建间隔计时器重置

creating an interval timer reset

javascript

timer

angularjs