停止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

使用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 2

这是大多数情况下，jQuery的阿贾克斯。

但你可以解决它通过设置ajax异步通过defaut为false。

$.ajaxSetup({async:false}); 

并将其置于文档准备好之下。

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

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(); 
      } 
     }