使用 jQuery 和 AJAX 进行长轮询的正确方法是什么

Question

我有一个涉及实时通知的项目。 所以我偶然发现了使用 socket io 但我还没有足够的时间来学习它。 所以我尝试用 AJAX 和 jQuery 来做。 下面是我的代码结构，我想知道这是否没有缺点？

setInterval(function(){
  if( !element.hasClass('processing') ){
    element.addClass('processing');
    $.ajax({
      type:         'post',
      dataType:     'json',
      url:      ajaxurl,
      data:         {},
      success:  function( response ){
        /* Success! */
        element.removeClass('processing');
      }
    });
  }
}, 2500);

Answer 1

一些额外的信息

您描述的方式将起作用。 根据经验，我只想指出一些事情。

• 我通常做一个递归函数，允许你等待 ajax 调用之间的间隔而不是固定速率。 //可选但确实为服务器提供了一些喘息的空间。

• 使用带有 isActive 标志的 window.setTimeout()。 //允许您出于任何原因停止轮询，因为函数是递归启动的，如果需要的话

• 为了彻底，我发现处理 $.ajax() 帖子的错误情况总是一个好主意。 您也许可以显示一些消息，告诉用户他不再连接到互联网等。

一些示例代码：

var isActive = true;

$().ready(function () {
    //EITHER USE A GLOBAL VAR OR PLACE VAR IN HIDDEN FIELD
    //IF FOR WHATEVER REASON YOU WANT TO STOP POLLING
    pollServer();
});

function pollServer()
{
    if (isActive)
    {
        window.setTimeout(function () {
            $.ajax({
                url: "...",
                type: "POST",
                success: function (result) {
                    //SUCCESS LOGIC
                    pollServer();
                },
                error: function () {
                    //ERROR HANDLING
                    pollServer();
                }});
        }, 2500);
    }
}

注意

这只是我使用您正在使用的确切方法获得的一些东西，似乎 Web Sockets 可能是更好的选择，我将在不久的将来深入研究。

Answer 2

请参考： Jquery : Ajax: 如何在开始前显示加载对话框并在关闭后关闭？

我希望这可以帮助你

$("div.add_post a").click(function(){

  var dlg = loadingDialog({modal : true, minHeight : 80, show : true});
            dlg.dialog("show");
  $.ajax({
        url : "/add.php",
        complete : function (){
            dlg.dialog("hide");
        }
     });
 return false;
});


//--Loading dialog

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dialog;
}