在AngularJS中停止setTimeout函数（提示：使用$ timeout）

Posted 2021-05-04

我正在制作一个测验类型的应用程序，当用户得到一个问题时，10秒的计时器就像这样：

$scope.timer2 = function() {
    setTimeout(function() {
        console.log('times up!!!!');
    }, 10000)
}

当问题到达时，它会被调用：

timerHandle = setTimeout($scope.timer2());

在此timer2执行后弹出另一个问题等等，弹出问题的另一种方式是用户选择一个选项，然后出现一个新问题。到目前为止一直很好，但问题是如果假设5秒钟通过然后用户选择一个选项，“timer2”仍显示“times up !!”再过5秒钟，新问题的另一个计时器也会显示“次数!!”如果用户没有选择任何选项。

我想说的是，当用户选择任何选项时，我希望timer2停止，然后我再次想要调用此计时器，因为新问题将到达。这是用户选择选项时执行的角度代码： -

 $scope.checkanswer=function(optionchoosed){
            $http.get('/quiz/checkanswer?optionchoosed='+ optionchoosed).then(function(res){
                if(res.data=="correct"){
                    $scope.flag1=true;
                    $scope.flag2=false;

                }else{
                    $scope.flag2=true;
                    $scope.flag1=false;
                }
                $http.get('/quiz/getquestions').then(function(res){
                console.log("respo");
                $scope.questions=res.data;
                clearTimeout($scope.timerHandle);  //not working
                timerHandle = setTimeout($scope.timer2());

答案

您可以尝试使用AngularJS $timeout的服务。然后沿着这些方向做一些事情：

var myTimer = $timeout(function(){
                console.log("hello world")
             }, 5000);

     ....
$timeout.cancel(myTimer);

另一答案

查看setTimeout的MDN文档。 如您所见，该函数返回唯一标识符。此时，您可以调用clearTimeout将该UID作为参数传递：

let myTimeout = setTimeout(myFunction, millis); //Start a timeout for function myFunction with millis delay.
clearTimeout(myTimeout); //Cancel the timeout before the function myFunction is called.

另一答案

既然你没有提供工作实例让我做最好的猜测。你的函数不会从内部setTimeout返回句柄，因此无法取消。这样的修改怎么样：

$scope.timer2 = function() {
    return setTimeout(function() {  // added return statement
        console.log('times up!!!!');
    }, 10000)
}

然后

timerHandle = $scope.timer2(); // simply call timer2 that returns handle to inner setTimeout