如何重置和设置计时器功能?

马可

我有一个带有控制器的测验应用程序,应在其中设置一个应该计数30秒的计时器,然后在该时间内没有活动的情况下停止测验。如果在此期间有活动,则应将其重置并重新开始计数。我已经为此设置了Web套接字侦听器。我应该如何设置计时器?

这是我的控制器:

angular.module('quiz.controllers')
.controller('MultiPlayerQuestionController', function(
  $scope,
  $rootScope,
  $state,
  $stateParams,
  $timeout,
  UserService,
  QuizService,
  InviteService,
  MessageService,
  SocketService
) {
  $scope.user = UserService.get();
  $scope.quiz = QuizService.getCurrent();
  $scope.opponent = $scope.user.player.id == $scope.quiz.players[0].id
    ? $scope.quiz.players[1]
    : $scope.quiz.players[0]
    || null;

  $scope.currentQuestion = {};
  $scope.answer = {};
  $scope.showAlternatives = false;
  $scope.showCorrect = false;
  $scope.isLast = false;
  $scope.opponentAnswered = false;

  var timeouts = {
    stop: null,
    activate: null
  };

  var startTime,
      loadBar,
      initiated = false;

  // Opponent has answered; update score display
  SocketService.socket.removeAllListeners('gameEvent:opponentAnswer');
  SocketService.socket.on('gameEvent:opponentAnswer', function(message) {
    $scope.opponentAnswered = true;
    QuizService.updateOpponentScore(message.data.totalScore);
  });

  // Next question is triggered from all players having answered
  SocketService.socket.removeAllListeners('gameEvent:nextQuestion');
  SocketService.socket.on('gameEvent:nextQuestion', function(message) {
    $timeout(function() {
      QuizService.setCurrentQuestion(message.data.question);
      setupQuestion(message.data.question);
    }, 3000);
  });

  // Game is finished, go to score screen
  SocketService.socket.removeAllListeners('gameEvent:quizFinished');
  SocketService.socket.on('gameEvent:quizFinished', function(message) {
    stopQuiz();

    $timeout(function() {
      $state.go('multiplayer.score');
    }, 3000);
  });

  // An opponent has quit, go to score screen
  SocketService.socket.removeAllListeners('gameEvent:opponentQuit');
  SocketService.socket.on('gameEvent:opponentQuit', function(message) {
    stopQuiz();
    MessageService.alertMessage('Motstanderen din har enten gitt opp eller blitt frakoblet.');
    $state.go('multiplayer.score');
  });

  // Disconnected. Go back to home screen.
  SocketService.socket.removeAllListeners('reconnecting');
  SocketService.socket.on('reconnecting', function() {
    MessageService.alertMessage('Du har mistet tilkoblingen. Spillet har blitt avbrutt.');
    SocketService.socket.removeAllListeners('reconnecting');
    $state.go('main.front');
  });

  // The app was paused (closed), equals giving up.
  var pauseEvent = $rootScope.$on('app:paused', function() {
    QuizService.giveUpCurrent($scope.user.player);

    var resumeEvent = $rootScope.$on('app:resumed', function() {
      stopQuiz();
      $state.go('multiplayer.score');
      resumeEvent();
    });

    pauseEvent();
  });

  /**
   * Give up the current quiz.
   */
  $scope.giveUp = function (player) {
    MessageService.confirm('Ønsker du å avbryte quizen?').then(function(result) {
      if (result) {
        QuizService.giveUpCurrent(player);
        $state.go('multiplayer.score', {}, { reload: true });
        stopQuiz();
      }
    });
  };

  /**
   * Go to next question for current quiz.
   */
  $scope.nextQuestion = function() {
    $timeout.cancel(timeouts.stop);
    $timeout.cancel(timeouts.activate);

    QuizService.nextQuestion().$promise.then(function(question) {
      setupQuestion(QuizService.getCurrentQuestion());
    });
  };

  /**
   * Finish quiz.
   */
  $scope.finish = function() {
    QuizService.finish();
    $state.go('multiplayer.score');
  };

  /**
   * Choose an alternative (aka answer current question).
   */
  $scope.chooseAlternative = function(alternative) {
    if (!$scope.showAlternatives || $scope.showCorrect) {
      return;
    }

    var answerTime = Date.now() - startTime;

    $scope.answer = alternative;
    QuizService.answer(alternative, answerTime);

    if (timeouts.stop) {
      $timeout.cancel(timeouts.stop);
    }

    stopQuestion();
  };

  /**
   * Set up a new question - change data and start countdown to activate question.
   */
  var setupQuestion = function(question) {
    $scope.showAlternatives = false;
    $scope.showCorrect = false;
    $scope.currentQuestion = question;
    $scope.answer = {};
    $scope.isLast = parseInt($scope.quiz.questionCount) == parseInt($scope.currentQuestion.questionNumber);

    var prepareTime = 5000;

    var newLoadBar = loadBar.cloneNode(true);
    loadBar.parentNode.replaceChild(newLoadBar, loadBar);
    loadBar = newLoadBar;

    setAnimationDuration(loadBar, 'loadbar', prepareTime);
    timeouts.activate = $timeout(activateQuestion, prepareTime);
  };

  /**
   * A question timed out; stop and send empty answer.
   */
  var questionTimeout = function() {
    // Delay answering by a random delay between 0 and 500ms.
    $timeout(function() {
      stopQuestion();
      QuizService.noAnswer($scope.currentQuestion.id);
    }, Math.floor((Math.random() * 500) + 1));
  };

  /**
   * Activate the current question: show alternatives and open answering.
   */
  var activateQuestion = function() {
    $scope.showAlternatives = true;
    var timeToAnswer = 10000;
    startTime = Date.now();

    var newLoadBar = loadBar.cloneNode(true);
    loadBar.parentNode.replaceChild(newLoadBar, loadBar);
    loadBar = newLoadBar;

    setAnimationDuration(newLoadBar, 'loadbar', timeToAnswer);
    timeouts.stop = $timeout(questionTimeout, timeToAnswer);
  };

  /**
   * Stop the current question and show the correct answer info.
   */
  var stopQuestion = function() {
    $scope.showCorrect = true;
    stopAnimation(loadBar);
    $timeout.cancel(timeouts.stop);
  };

  /**
   * End the current quiz.
   */
  var stopQuiz = function() {
    SocketService.socket.removeAllListeners('gameEvent:opponentAnswer');
    SocketService.socket.removeAllListeners('gameEvent:nextQuestion');
    SocketService.socket.removeAllListeners('gameEvent:quizFinished');
    SocketService.socket.removeAllListeners('gameEvent:opponentQuit');
    SocketService.socket.removeAllListeners('reconnecting');

    $timeout.cancel(timeouts.stop);
    $timeout.cancel(timeouts.activate);
  };

  /**
   * Set the animation duration for an element. Used to stop and start the
   * progress bar.
   */
  var setAnimationDuration = function(element, keyframes, duration) {
    var animationSetting = keyframes + ' ' + duration + 'ms linear';

    element.style.webkitAnimation = animationSetting;
    element.style.animation = animationSetting;
  }

  var stopAnimation = function(element) {
    element.style.webkitAnimation = 'none';
    element.style.animation = 'none';
  };

  if (!initiated) {
    initiated = true;
    loadBar = document.getElementById('load-bar');
    setupQuestion(QuizService.getCurrentQuestion());
  }


});

我尝试调用在控制器中创建的responseTimer函数。在文件开始时,我这样称呼它:

responseTimer(30000);

然后,我将其定义如下:

var responseTimer = function (time) {
    responseTimer = $timeout(stopQuiz, time);
    console.log('Started timer');
  };

  var resetResponseTimer = function () {
      $timeout.cancel(responseTimer);
      responseTimer(30000);
      console.log("Timer reset");
  };

但是我得到一个错误:

TypeError:responseTimer不是一个函数

OBDM

问题来自范围冲突。在你的代码中

// responseTimer is declared as a global function
var responseTimer = function (time) {

   // as the var keyword is not specify, scope of responseTimer becomes global and not local and overrides the previous declaration
   responseTimer = $timeout(stopQuiz, time);

这就是为什么你会得到错误

 responseTimer is not a function

要解决该问题,请在第二个声明之前添加var关键字,并适当命名您的变量。一个好的做法是在命名函数/对象的方法时添加一个动作动词,在这种情况下,triggerResponseTimer作为函数的名称,responseTimer作为变量的名称,因此最终的用法是:

var triggerResponseTimer = function (time) {

    var responseTimer = $timeout(stopQuiz, time);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设置计时器和清除计时器?

来自分类Dev

如何为CSS动画计时功能设置计时器?

来自分类Dev

设置功能的计时器

来自分类Dev

如何停止和重置 setInterval 计时器

来自分类Dev

如何使用j查询功能设置多个计时器?

来自分类Dev

重置计时器?

来自分类Dev

重置计时器

来自分类Dev

如何创建可重置计时器?

来自分类Dev

如何使用Tkinter重置计时器

来自分类Dev

如何创建可重置计时器?

来自分类Dev

如何创建计时器功能?

来自分类Dev

重置pygame的计时器

来自分类Dev

计时器未重置

来自分类Dev

如何设置点击计时器?

来自分类Dev

如何设置计时器Arduino

来自分类Dev

计时器后如何设置状态

来自分类Dev

添加计时器的开始,停止和重置按钮

来自分类Dev

单击重置计时器以显示和隐藏-jQuery

来自分类Dev

如何制作可重置的RxSwift计时器?

来自分类Dev

如何在React-Hooks中重置计时器

来自分类Dev

如何在javascript / jquery中重置计时器?

来自分类Dev

完成后如何重置计时器组件

来自分类Dev

如何在react js中正确重置计时器

来自分类Dev

如何在React功能组件中正确设置setInterval计时器?

来自分类Dev

如何设置跟随滚动到顶部功能的计时器

来自分类Dev

如何在某些功能上设置计时器或延迟

来自分类Dev

Linux关于设置计时器功能的问题

来自分类Dev

如何在计时器中调用启动和停止功能

来自分类Dev

如何在计时器中调用启动和停止功能