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>