javascript - setTimeout 更短的超时与更长的超时

Question

我正在争论这是否是一种在 Javascript 中处理计时器的好方法。我正在使用 Angular，但概念与使用 setTimeout 而不是 Angular 提供的 $timeout 函数是一样的。

旧方法:

$scope.timer=$scope.doTiming();
$scope.timeRemaining=30; //30 second timer;
$scope.doTiming=function(){
    return $timeout(function(){
        $scope.timeRemaining=$scope.timeRemaining-1;
        if($scope.timeRemaining<=0){
            $scope.disabledEntry=true;
            $scope.submitData();
        }else{
            $scope.timer=$scope.doTiming();
        }
    },1000);
};

30 计时器耗时:30.050 秒

新方法:

var startTime=new Date().getTime, delta; //new: get current time
$scope.timeRemaining=30;
$scope.timer=$scope.doTiming();
$scope.doTiming=function(){
    return $timeout(function(){
        delta=(new Date().getTime())-startTime; //new: get delta from start time
        $scope.timeRemaining=$scope.timeRemaining-(delta/1000); //new: subtract by delta
        if($scope.timeRemaining<=0){
            $scope.disabledEntry=true;
            $scope.submitData();
        }else{
            $scope.timer=$scope.doTiming();
        }
    },1);
};

30 计时器耗时:30.002 秒

主要区别在于旧方法每秒循环一次，并计时。新的方式非常快速地不断循环，并根据从一开始的时间变化来测量时间，因此它有可能更准确。我想知道这是否合理？这种类型的即时循环会导致旧计算机出现问题吗？我是否应该使用定时器为 100 而不是 1 的新方法？想法？

编辑

由于与超时减慢相关的原因，新方法对我来说更可取:Chrome: timeouts/interval suspended in background tabs?

Answer 1

在我看来，您应该根据需要进行尽可能多的“超时”，但尽可能少。换句话说，如果您需要每秒更新一个计时器，则每秒触发一次超时。没有人会注意到计时器更新有 50 毫秒的延迟(也不会有人关心)，所以我认为不值得用额外的 JavaScript 周期来打扰浏览器，例如。更新一些动画可能会更好。

我想不出这不适用于增量时间方法的原因。最坏的情况是选项卡在触发一秒超时后立即进入后台。当用户返回选项卡时，大约需要一秒钟的时间，直到计时器刷新，并且在该时间间隔内，用户仍会看到他使选项卡处于非事件状态时的计时器值。如果这对您的用例来说是可以接受的，我根本不会担心增加间隔:)