jQuery的方法執行幾次

Question

我想實現簡單的彗星聊天的例子，爲此我實現了長輪詢，每30秒遞歸調用自己。

當按下按鈕時我希望另一個Ajax請求在服務器上使用POST發送新數據。

現在我只是把警惕這種功能觸發點擊事件

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
var polling = function poll(){ 
    $("#postMessage").click(function() { 
    alert("request"); 
    }); 
    $.ajax({ dataType: 'json',url: "CometServlet", success: function(data){ 

      if (data !=null){ 
     $('#message').append(data.sender+" : " + data.message+"<br />"); 
      } 
    }, complete: poll, timeout: 30000 }); 
} 
$(document).ready(polling) 

</script> 

而我的HTML是這樣的：

<div> 
    <input type="button" id="postMessage" value="post Message"> 
</div> 
<div id ="message" name="message"></div> 

當我點擊按鈕我的警報顯示數次。爲什麼？我該如何解決它？

Answer 1

正如戴夫提到的那樣，這不是timeout選項的作用。請嘗試使用setTimeout代替。此外，你正在混合你的輪詢邏輯和你的處理器（我認爲）。這裏是你將如何把它們分開：

function poll() { 
    $.ajax({ 
     dataType: 'json', 
     url: "CometServlet", 
     success: function(data){ 
      if (data !=null){ 
       $('#message').append(data.sender+" : " + data.message+"<br />"); 
      } 
     }, 
     complete: function() { 
      setTimeout(poll, 30000); 
     } 
    }); 
} 

$(document).ready(function() { 
    $("#postMessage").click(function() { 
     alert("request"); 
    }); 

    poll(); 
}); 

例子：http://jsfiddle.net/VyGTh/

Answer 2

在你的代碼後，每個Ajax調用你重新綁定click事件#postMessage，這就是爲什麼你有幾個警報消息。你需要在頁面加載時只綁定一次點擊。您可以通過執行以下操作來修復它：

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
var polling = function poll(){ 
    $.ajax({ dataType: 'json',url: "CometServlet", 
      success: function(data){ 
       if (data !=null){ 
        $('#message').append(data.sender+" : " + data.message+"<br />"); 
       } 
      }, 
      complete: poll, 
      timeout: 30000 
    }); 
} 
$(document).ready(function(){ 
    // Now Click only binds one time 
    $("#postMessage").click(function() { 
     alert("request"); 
    }); 
    polling(); 
}); 

</script>