在AngularJS中停止setTimeout函数(提示:使用$ timeout)

时间:2017-12-29 10:12:15

标签: javascript angularjs timer settimeout

我正在制作一个测验类型的应用程序,当用户得到一个问题时,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());

3 个答案:

答案 0 :(得分:2)

您可以尝试使用AngularJS $timeout的服务。 然后沿着这些方向做点什么:

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

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

答案 1 :(得分:1)

查看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.

答案 2 :(得分:0)

由于您没有提供工作示例,请让我做最好的猜测。您的函数不会从内部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