时间戳

首页 > 解决方案 > stoptimer jquery中事件函数调用3次的问题

jquery - stoptimer jquery中事件函数调用3次的问题

问题描述

我正在制作一个停止计时器，我想在计时器启动后的某个特定时间段发出警报，但是当我设置警报时，它会出现 3 次。

我只想要一次警报。

我在这里用我的 代码做了一个 js 摆弄。

我在下面的代码中有问题。

$(document).ready(function(){
$('#sw_s, #sw_h, #sw_m').on('DOMSubtreeModified',function(){
    //alert(test_duration);
    var hour = $('#sw_h').html();
    var minute = $('#sw_m').html();
    var second = $('#sw_s').html();
    var time = hour+':'+minute+':'+second;
    var test_duration ='00:00:02';
    if (time == test_duration && time !== '' && time !== null && time !== undefined) 
    {
        alert('call');
        $.APP.pauseTimer();
        /*var form_data = getallquestionanswer();
        $.post('post.php', {action: 'userReport', data: form_data}, function(response){
            window.location.replace("exam-results.php");
            return false;
        });*/

    }
})

});

有人可以帮我吗？

标签： jqueryhtml

解决方案

只需尝试此代码，它可能对您有用。

$(document).ready(function() {        
  (function($){          
    $.extend({                  
      APP : {              
        formatTimer : function(a) {
          if (a < 10) {
            a = '0' + a;
          }                              
          return a;
        },                         
        startTimer : function(dir) {                          
          var a;                          
          // save type
          $.APP.dir = dir;                          
          // get current date
          $.APP.d1 = new Date();                          
          switch($.APP.state) {                                  
            case 'pause' :                                  
              // resume timer
              // get current timestamp (for calculations) and
              // substract time difference between pause and now
              $.APP.t1 = $.APP.d1.getTime() - $.APP.td;
              break;
            default :                                  
              // get current timestamp (for calculations)
              $.APP.t1 = $.APP.d1.getTime();
              // if countdown add ms based on seconds in textfield
              if ($.APP.dir === 'cd') {
                $.APP.t1 += parseInt($('#cd_seconds').val())*1000;
              }   
              break;
          }                                   

          // reset state
          $.APP.state = 'alive';   
          $('#' + $.APP.dir + '_status').html('Running');

          // start loop
          $.APP.loopTimer();

        },                      
        pauseTimer : function() {

          // save timestamp of pause
          $.APP.dp = new Date();
          $.APP.tp = $.APP.dp.getTime();

          // save elapsed time (until pause)
          $.APP.td = $.APP.tp - $.APP.t1;

          // change button value
          $('#' + $.APP.dir + '_start').val('Resume');

          // set state
          $.APP.state = 'pause';
          $('#' + $.APP.dir + '_status').html('Paused');

        },                      
        stopTimer : function() {

          // change button value
          $('#' + $.APP.dir + '_start').val('Restart');                    

          // set state
          $.APP.state = 'stop';
          $('#' + $.APP.dir + '_status').html('Stopped');

        },                      
        resetTimer : function() {

          // reset display
          $('#' + $.APP.dir + '_ms,#' + $.APP.dir + '_s,#' + $.APP.dir + '_m,#' + $.APP.dir + '_h').html('00');                 

          // change button value
          $('#' + $.APP.dir + '_start').val('Start');                    

          // set state
          $.APP.state = 'reset';  
          $('#' + $.APP.dir + '_status').html('Reset & Idle again');

        },                      
        endTimer : function(callback) {

          // change button value
          $('#' + $.APP.dir + '_start').val('Restart');

          // set state
          $.APP.state = 'end';

          // invoke callback
          if (typeof callback === 'function') {
            callback();
          }    

        },  
        loopTimer : function() {

          var td;
          var d2,t2;

          var ms = 0;
          var s  = 0;
          var m  = 0;
          var h  = 0;

          if ($.APP.state === 'alive') {

            // get current date and convert it into 
            // timestamp for calculations
            d2 = new Date();
            t2 = d2.getTime();   

            // calculate time difference between
            // initial and current timestamp
            if ($.APP.dir === 'sw') {
              td = t2 - $.APP.t1;
              // reversed if countdown
            } else {
              td = $.APP.t1 - t2;
              if (td <= 0) {
                // if time difference is 0 end countdown
                $.APP.endTimer(function(){
                  $.APP.resetTimer();
                  $('#' + $.APP.dir + '_status').html('Ended & Reset');
                });
              }    
            }    

            // calculate milliseconds
            ms = td%1000;
            if (ms < 1) {
              ms = 0;
            } else {    
              // calculate seconds
              s = (td-ms)/1000;
              if (s < 1) {
                s = 0;
              } else {
                // calculate minutes   
                var m = (s-(s%60))/60;
                if (m < 1) {
                  m = 0;
                } else {
                  // calculate hours
                  var h = (m-(m%60))/60;
                  if (h < 1) {
                    h = 0;
                  }                             
                }    
              }
            }

            // substract elapsed minutes & hours
            ms = Math.round(ms/100);
            s  = s-(m*60);
            m  = m-(h*60);                                

            // update display
            $('#' + $.APP.dir + '_s').html($.APP.formatTimer(s));
            $('#' + $.APP.dir + '_m').html($.APP.formatTimer(m));
            $('#' + $.APP.dir + '_h').html($.APP.formatTimer(h));

            // loop
            $.APP.t = setTimeout($.APP.loopTimer,1);
          } else {

            // kill loop
            clearTimeout($.APP.t);
            return true;
          }  
        }
      }    
    });

    $('#sw_start').on('click', function() {
      $.APP.startTimer('sw');
    });    

    $('#cd_start').on('click', function() {
      $.APP.startTimer('cd');
    });           

    $('#sw_stop,#cd_stop').on('click', function() {
      $.APP.stopTimer();
    });

    $('#sw_reset,#cd_reset').on('click', function() {
      $.APP.resetTimer();
    });  

    $('#sw_pause,#cd_pause').on('click', function() {
      $.APP.pauseTimer();
    });                

  })(jQuery);
	
});
$("body").on('DOMSubtreeModified', "#sw_h,sw_m,sw_s", function() {
    // code here

    
    var hour = $('#sw_h').html();
    var minute = $('#sw_m').html();
    var second = $('#sw_s').html();
    var time = hour+':'+minute+':'+second;
    var test_duration= '00:00:02';
    
   if (time == test_duration && time !== '' && time !== null && time !== undefined) 
    {
      alert('call');
      $.APP.pauseTimer();
      /*var form_data = getallquestionanswer();
            $.post('post.php', {action: 'userReport', data: form_data}, function(response){
                window.location.replace("exam-results.php");
                return false;
            });*/

    }
  })
<style>
input {
        padding:4px;}
        input[type="text"] {
        width:50px;
        text-align:center;}    
        div {
        font-family:Arial,Verdana;
        font-size:12px;
        width:360px;
        background-color:#f2f2f2;
        padding:16px;
        border:solid 1px #e5e5e5;
        text-align:center;
        margin:0 0 16px 0;}
        div span:last-child {
        color:green;}
        h1 {
        font-size:14px;
        margin:0 0 8px 0;
        }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div>
  <h1>Stopwatch</h1>
  <span id="sw_h">00</span>:
  <span id="sw_m">00</span>:
  <span id="sw_s">00</span>
  <br/>
  <br/>
  <input type="button" value="Start" id="sw_start" />
  <br/>
  <br/>
  
</div>
</body>
</html>

推荐阅读