javascript - cancel - timeout angular 4

Hacer un temporizador de 10 segundos para una aplicación Angular JS

Question

Estaba trabajando en una aplicación de prueba en Angular JS, más como la aplicación de prueba donde puedes tener un cuestionario cronometrado que consta de preguntas, cada pregunta te da 10 segundos para responder. He completado la creación de una aplicación de prueba que me permite responder preguntas y al final dando resultados pero estoy atascado en el problema de cómo puedo introducir un temporizador para cada una de mis preguntas? ¿Debo hacer una directiva separada o un controlador? El problema es que el temporizador requiere una función $ timeout que crea un retraso pero eso crea un retraso en mi aplicación por completo. ¿Alguna ayuda?

Nota: soy un principiante en Angular JS.

app.js:

var app = angular.module(''TheQuiz'',[]);

app.controller(''QuizControl'',[''$scope'',''$http'',''$sce'',''$timeout'',function($scope,$http,$sce,$timeout){

    $scope.score = 0;
    $scope.presentQues = -1;
    $scope.presentQuesAnswered = 0;
    $scope.percent = 0;
    $scope.playername = $scope.playername;
    $scope.myself = false;

    $http.get(''getdata.php'').then(function(qData){
        $scope.Questions = qData.data;
        $scope.fullQuestions = $scope.Questions.length;
    });

    $scope.startQuiz = function(){
        if ($scope.playername.length){
            $scope.presentQues = 0;
        }
    }

    $scope.restart = function(){

        $scope.score = 0;
        $scope.presentQues = -1;
        $scope.presentQuesAnswered = 0;
        $scope.percent = 0;
        $scope.playername = "";
        $http.get(''getdata.php'').then(function(qData){
        $scope.Questions = qData.data;
        $scope.fullQuestions = $scope.Questions.length;

    });

    }

    $scope.selectAns = function(pIndex , rIndex){

        var quesState = $scope.Questions[pIndex].quesState;

        if ( quesState != ''answered'' ){

            $scope.Questions[pIndex].selectedAns = rIndex;
            var rightAns = $scope.Questions[pIndex].correct;
            $scope.Questions[pIndex].rightAns = rightAns;

            if (rIndex === rightAns){
                 $scope.Questions[pIndex].correctness = ''correct'';
                $scope.score += 1;
            }

            else {
                $scope.Questions[pIndex].correctness = ''incorrect'';
            }

            $scope.Questions[pIndex].quesState = "answered";
        }

        $scope.percentage = (($scope.score / $scope.fullQuestions) * 100).toFixed(2);

    }

    $scope.yesselected = function(pIndex , rIndex){
        return  $scope.Questions[pIndex].selectedAns === rIndex;
    }

    $scope.yescorrect = function(pIndex , rIndex){
        return  $scope.Questions[pIndex].rightAns === rIndex;
    }

    $scope.Continue = function(){
        return $scope.presentQues += 1;
    }

    $scope.Pass = function(){
          return $scope.presentQues += 1;
    }

}]);

Answer 1

Su mejor apuesta al trabajar con el tiempo en Javascript es usar la biblioteca moment.js . Hace la vida mucho más fácil.

Lo construí usando Angular 1.5.x y usé un componente.

Aquí hay un enlace a una versión de trabajo .

He agregado un par de propiedades en el componente para facilitar su uso, pero, por supuesto, esto puede ocultarse a los usuarios si es necesario. Simplemente configure la cantidad y la unidad. es decir, para una cuenta atrás de 10 horas, simplemente configure cmp-from a 10 y cmp-unit a hour. Estos valores imitan el método format () en la biblioteca de moment() que usa el método add () .

También agregué un método onEnd para que cualquier controlador padre pueda ser notificado de la finalización del temporizador.

Esto es solo para fines de demostración, idealmente esto debería seguir un enfoque de programación más funcional para la producción.

Uso:

<cmp-timer
  cmp-from="10"
  cmp-unit="second"
  cmp-on-end="$ctrl.doSomething()">
</cmp-timer>

Componente:

angular
  .module(''app'', [])
  .component(''cmpTimer'', {
    bindings: {
      cmpFrom: ''<'',
      cmpUnit: ''@'',
      cmpOnEnd: ''&''
    },
    template: ''<div class="timer">{{$ctrl.timeRemaining}}</div>'',
    controller: function ($interval) {
      var vm = this, ONE_SECOND = 1000, timerInterval;

      function startTimer() {
        var END_TIME = vm.getEndTime();

        function update() {     
          vm.timeRemaining = moment((moment(END_TIME) - moment())).format("HH:mm:ss");
        }

        timerInterval = $interval(function() {
          if (moment() > moment(END_TIME)) return vm.stopTimer();

          update();
        }, ONE_SECOND);

        update();
      }

      vm.getEndTime = function() {
        return moment().add(vm.cmpFrom, vm.cmpUnit);
      }

      vm.stopTimer = function() {
        alert(''Time/'s up!'');

        vm.cmpOnEnd();

        vm.$onDestroy();
      }

      vm.$onDestroy = function() {
        $interval.cancel(timerInterval);
      }

      vm.$onInit = startTimer;
    }
  });

El enfoque que recomendaría sería tener un controlador externo / vista y usar ngIf para mostrar u ocultar el cmp-timer siempre que esté listo para hacerlo.

Answer 2

puede hacer una directiva personalizada para este propósito o puede referir este enlace

https://siddii.github.io/angular-timer/