Остановка повторения jQuery

Question

У меня есть проблема. У меня есть скрипт, который сначала проверяет, загружено ли содержимое iframe.

1. Когда содержимое загружено, появится таймер обратного отсчета.
2. Как только таймер достигнет 0, форма будет запущена.

Моя проблема в том, что при загрузке iframe и начале обратного отсчета я могу щелкнуть другую ссылку в iframe, и таймер снова запустится.

Мой скрипт:

<script type="text/javascript">
//Loading bar style
$(document).ready(function() {
    $("#progressbar").progressbar({ value: 0 });
});
// on document load:
$(function() {
   // set "waiting" message:
   $("#loadingStatus").html("Waiting for your advertisements to load...");

   // on iframe load:

   $('#iFrame').load(function() {

       $("#loadingStatus").html($("#isDone").html());



   });
});

$(function count() {
   var seconds = <?php echo $exposure[$r['exposure']]; ?>;
   setTimeout(updateCountdown, 1000);

   function updateCountdown() {
      seconds--;

      if (seconds > 0) {
         $("#countdown").text("You must view this advertisement for " + seconds + " seconds.");
         //$('#progressbar').progressbar({ value: Math.round((seconds/10)*100) });
         setTimeout(updateCountdown, 1000);
      } else {
         submitForm();
      }
   }
});                                                                             


function submitForm() {
                $("#countdown").empty().html('<img src="..ify/dream/images/loading.gif" />');
                $.post(
                    'index.php?i=v&p=k&key=DSF79SADFHSA7D9FGSAD097FSAD7F9779ASDFGS9', 
                    $('form').serialize(),
                    function (data) {
                        proccessData(data);
                    }
                ); 

}  

function proccessData (data) {
            $('#statusF').hide().html('');

            if(data=='success'){
                $('form').fadeOut();
                $('#countdown').addClass('noti-success').html('Advertisement validated!').slideDown();
                redirect("?i=l");  
            }
            else {
                $('#countdown').addClass('noti-error').html(data).fadeIn();
            }
        }

  </script>

Answer 1

это в большинстве случаев jquery ajax.

но вы можете решить эту проблему, установив асинхронность ajax по умолчанию в false.

$.ajaxSetup({async:false});

и положите его под документ готовым.

$(document).ready(function() {
      $.ajaxSetup({async:false});
      // another code here...
});

Answer 2

Используйте метод clearTimeout, чтобы остановить тайм-аут, который больше не нужен.

Объявите переменную для хранения дескриптора таймера и присвойте ему результат setTimeout.Сбросьте таймер, если функция вызывается снова, а ручка установлена:

var timer = null;

function count() {
   var seconds = <?php echo $exposure[$r['exposure']]; ?>;
   if (timer != null) window.clearTimeout(timer);
   timer = setTimeout(updateCountdown, 1000);

   function updateCountdown() {
      timer = null;
      seconds--;

      if (seconds > 0) {
         $("#countdown").text("You must view this advertisement for " + seconds + " seconds.");
         //$('#progressbar').progressbar({ value: Math.round((seconds/10)*100) });
         timer = setTimeout(updateCountdown, 1000);
      } else {
         submitForm();
      }
   }
}

Демо: http://jsfiddle.net/Guffa/deeWy/1/

Answer 3

Попробуйте это

    var countDownTimer = null;
    var seconds = <?php echo $exposure[$r['exposure']]; ?>;

    function setCountDownTimer(){
      if(countDownTimer)
        clearTimeout(countDownTimer);

      countDownTimer = setTimeout(updateCountdown, 1000);
    };

    function updateCountdown() {
          countDownTimer = null;
          seconds--;

          if (seconds > 0) {
             $("#countdown").text("You must view this advertisement for " + seconds + " seconds.");
             //$('#progressbar').progressbar({ value: Math.round((seconds/10)*100) });
             setCountDownTimer();
          } else {
             submitForm();
          }
     }

// on document load:
$(function() {

   $("#progressbar").progressbar({ value: 0 });

   // set "waiting" message:
   $("#loadingStatus").html("Waiting for your advertisements to load...");

   // on iframe load:

   $('#iFrame').load(function() {

       $("#loadingStatus").html($("#isDone").html());

       //Attached click event to the link inside iframe to restart the timer
       var iframe = $('#iFrame');
       iframe.contents().find("linkSelector").click(function(){
         window.top.setCountDownTimer();
       });

   });

   setCountDownTimer();
});



function submitForm() {
                $("#countdown").empty().html('<img src="..ify/dream/images/loading.gif" />');
                $.post(
                    'index.php?i=v&p=k&key=DSF79SADFHSA7D9FGSAD097FSAD7F9779ASDFGS9', 
                    $('form').serialize(),
                    function (data) {
                        proccessData(data);
                    }
                ); 

}  

function proccessData (data) {
            $('#statusF').hide().html('');

            if(data=='success'){
                $('form').fadeOut();
                $('#countdown').addClass('noti-success').html('Advertisement validated!').slideDown();
                redirect("?i=l");  
            }
            else {
                $('#countdown').addClass('noti-error').html(data).fadeIn();
            }
        }