Jquery метод выполняется несколько раз

Question

Я пытаюсь реализовать простой пример чата Comet, и для этого я реализовал длинный опрос, который вызывает сам себя рекурсивно каждые 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. Кроме того, вы смешиваете свою логику опроса и ваш обработчик 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 вы перепривязываете событие клика к #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>