無法運行包含setTimeout（）兩次的函數。奇怪的行爲

Question

我有一個問題與JavaScript函數的setTimeout（）和的setInterval（）功能。

Basicly我的函數處理表單提交的動作。點擊後從尖形式「提交」按鈕，所有的數據被序列化並通過Ajax的時候觸發「 functionName」發送。 functionName返回，如果一切正常，或錯誤代碼如果不是。之後彈出div與成功的消息或錯誤代碼創建。 Popup div應該可見6秒。用戶應該看到倒計時從到。當達到零時，如果給出重定向參數，則頁面被重定向。如果未指定重定向參數，則彈出式div將被刪除。我正在使用 setTimeout（）功能會引起一些麻煩。在此之前，我正在使用設置間隔功能和問題看起來幾乎相同。

當funcion handleSubmit被首次發射（提交插嘴點擊）倒計時功能的偉大工程，但是當我再次觸發該功能的strage的事情發生。我使用 onclick來運行我的功能。

<input type="submit" name="submit" onclick="handleSubmit('formName', 'functionName', 'redirectURL')" value="send" /> 

這裏是我的函數的定義：

function handleSubmit(formName, functionName, redirectLocation){ 
    $('form#' + formName).submit(function(event){ 
     event.preventDefault(); 

     $.ajax({ 
      type: "POST", 
      url: '/ajax/functions/module=none,method=' + functionName, 
      data: $('form#' + formName).serialize(), 
      success: function(data){ 

       var div = $('<div></div>').addClass('messages'); 
       div.appendTo('.content_block'); 

       var exitButton = $('<p class="title" style="overflow: hidden; margin-top:10px;"></p>'); 

       /** 
        * If the redirectLocation argument is empty we create HTML button with 
        * removeElement function which removes HTML popup DIV with class "messages" 
        * but if redirectLocation argument is provided we create HTML button with 
        * redirect function so after clicking we will be redirected. 
        * This buttons are created if we dont want to wait 6 seconds 
        */ 

       if(redirectLocation=='') 
        var button = $('<img title="Close this message" onclick="removeElement(\'.messages\')" src="/public/images/close.png" alt="Close message" style="cursor: pointer; float: right; padding-right: 10px;" width="16" height="16" />'); 
       else 
        var button = $('<img title="Close this message" onclick="redirect(\''+ redirectLocation + '\')" src="/public/images/close.png" alt="Wyłącz komunikat" style="cursor: pointer; float: right; padding-right: 10px;" width="16" height="16" />'); 


       exitButton.html(button); 
       div.html(exitButton); 
       var message = $('<p></p>'); 

       /** 
       * Data recieved from AJAX 
       */ 

       if(data==1){ 

        message.html("Data was successful uploaded"); 
        message.appendTo(div); 

        var timer = $('<span id="timer"></span>'); 
        timer.html('Message will be closed after: <b id="show-time">6</b> sec.'); 
        timer.appendTo(div); 

        setTimeout("timedCount(" + redirectLocation + ")", 1000);    //this is countdown function 

       }else{ 
        message.html("Error: " + functionName + "."); 
        var error = $('<p>Error content: ' + data + '</p>'); 
        error.appendTo(message); 
        message.appendTo(div); 

        var timer = $('<span id="timer"></span>'); 
        timer.html('Message will be closed after: <b id="show-time">6</b> sek.'); 
        timer.appendTo(div); 
        setTimeout("timedCount(" + redirectLocation + ")", 1000);    //this is countdown function 
       } 

       return true; 
      }}); 
    }); 

} 

而且我timedCount功能，應該遞減計數從6到0看起來是這樣的。

function timedCount(redirectLocation){ 
    timeCounter = $('#show-time').html(); 
    updateTime = parseInt(timeCounter)- 1; 
    $("#show-time").html(updateTime); 
    t = setTimeout("timedCount()", 1000); 
    if(updateTime == 0){ 
     if(redirectLocation){ 
      $('#timer').html('Redirecting...'); 
      window.location = (redirectLocation); 
     }else{ 
      $('.messages').remove(); 
      clearTimeout(t); 
     } 

    } 
} 

總結。第一次（不使用 redirectLocation時）功能 hendleSubmit工作正常。但是，當點擊提交按鈕第二次，我 timedCount功能不從6比0和的setTimeout倒計時在後臺運行，直到永遠。 我不知道是什麼原因導致此行爲。

Answer 1

您正在爲提交按鈕的click事件處理函數綁定submit事件處理函數。這意味着，在隨後每次點擊提交按鈕時，將爲表單的submit事件添加另一個事件處理程序。

如何聲明submit事件處理程序爲所有形式在一個更全球化的空間？只需移動$('form#' + formName).submit(function(event){...})以外的handleSubmit功能：$('form').submit(function(event){...})。

而且你應該在你的setTimeout聲明使用了一個匿名函數（這將避免使用eval()當它是沒有必要的）：

setTimeout(function() { 
    timedCount(redirectLocation) 
}, 1000);