Question

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

例如..我有10个幻灯片，幻灯片标识可见，幻灯片1可见，暂停延迟为5秒，我点击第5个缩略图/标识符滑块将展示第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;
};

创建间隔计时器重置

1 个答案: