Question

我试图实现简单的Comet聊天示例，为此我实现了Long polling，它每30秒递归调用一次。

按下按钮时，我想要另一个ajax请求，使用POST在Server上发送新数据。

现在我只是对此功能发出警报以触发点击事件

<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。此外，您正在混合轮询逻辑和click处理程序（我认为）。以下是将它们分开的方法：

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>

Jquery方法执行了好几次

2 个答案: