通过x秒延时Ajax请求并更新只有最后一个被点击的请求 [英] Delay ajax request by x seconds and update only the last clicked request

问题描述

大家好 我延迟一个AJAX请求3秒，然后更新与响应一个div。但我面临的问题是，当用户点击在所有三个环节同时，所请求的内容不断得到了DIV更新。我试图做的是，只会最后点击Ajax请求的内容，但不应放弃previous请求了。有什么办法，我可以实现它？在此先感谢

脚本

  $（'。联系李一）。点击（函数（事件）{
    。事件preventDefault（）;
    VAR的getURL = $（本）.attr（HREF）;
    VAR printCall =功能（）{
      $阿贾克斯（{
        网址：的getURL，
        键入：GET，
        beforeSend：功能（）{}，
        错误：函数（要求）{警报（要求）}，
        成功：功能（数据）{$（'＃graphContent）HTML（数据）; }
      }）;
    };
    的setTimeout（printCall，3000）;
  }）;
 

HTML

 ＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =HTTP：//localhost/test.php＆GT;链接1＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =HTTP：// localhost的＆GT;链接2'; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =的index.html＆GT;链接3'; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

你将需要：

• 系统的方法来清除最后超时 登记，并...
• 系统的方法来取消异步成功 在事件超时功能 事件不是之前被清除 异步请求是

对于第一项，超时函数调用可以用clearTimeout（）与的setTimeout（返回的ID被取消）... pretty的简单。至于第二点，你可以通过时间戳每个电话和比较你的成功的功能对最后点击呼叫制成的时间戳包围的时间戳变量的值做到这一点。

下面

请参阅：

  //所有点击功能范围之外的跟踪对象
VAR pendingCall = {时间戳：空，PROCID：空};

$（'。联系李一）。点击（函数（五）{
    即preventDefault（）;
    VAR的getURL = $（本）.attr（HREF）;

    //一个时间戳此调用
    变种的timeStamp = Date.now（）;

    VAR printCall =功能（）{
        $阿贾克斯（{
            网址：的getURL，
            键入：GET，
            beforeSend：功能（）{}，
            错误：函数（要求）{警报（要求）}，
            成功：功能（数据）{
                //短路执行，如果在这个呼叫的时间戳不匹配的最后一种制成
                如果（pendingCall.timeStamp =的timeStamp！）{返回false; }

                //将要采取的行动
                $（'＃graphContent'）的HTML（数据）。

                //清除引用此超时通话
                pendingCall.pr​​ocID = NULL;
            }
        }）;
    };

    //清除的最后一次通话超时做，如果它存在
    如果（pendingCall.pr​​ocID）{
        clearTimeout（pendingCall.pr​​ocID）
    };

    //更新超时调用跟踪器
    pendingCall = {时间戳：时间戳，和PROCID：的setTimeout（printCall，3000）};
}）;
 

Hi all I am delaying a AJAX request by 3 seconds and then updating a div with the response. But the problem what I face is, when the user clicks on all the three links simultaneously, the requested content keeps getting updated in the div. What i am trying to do is, serve only the last clicked ajax request content, but should not abort the previous requests too. Is there any way that i can achieve it ?? Thanks in advance

Script

 $('.links li a').click(function(event){                        
    event.preventDefault();
    var getUrl = $(this).attr("href");
    var printCall = function() {
      $.ajax({
        url: getUrl,
        type: "GET",
        beforeSend: function() {  },
        error: function(request){ alert(request) },
        success: function(data) { $('#graphContent').html(data); }
      });
    };
    setTimeout(printCall, 3000);
  });           

HTML

<ul>
<li><a href="http://localhost/test.php">Link 1</a></li>
<li><a href="http://localhost">Link 2</a></li>
<li><a href="index.html">Link 3</a></li>
</ul>

解决方案

You're going to need:

• A way to clear the last timeout registered, and...
• A way to cancel the asynch success function in the event the timeout event was not cleared before the asynch request was made

For the first item, timeout function calls can be cancelled by using clearTimeout() with the ID returned by setTimeout()... pretty straightforward. As to the second point, you can do this by timestamping every call and comparing the value of the timestamp variable enclosed by your success function against the timestamp of the last click call made.

See below:

// A tracker object outside the scope of all click functions
var pendingCall = { timeStamp: null, procID: null };

$('.links li a').click(function (e) {
    e.preventDefault();
    var getUrl = $(this).attr("href");

    // A timestamp for this call
    var timeStamp = Date.now();

    var printCall = function () {
        $.ajax({
            url: getUrl,
            type: "GET",
            beforeSend: function () { },
            error: function (request) { alert(request) },
            success: function (data) {
                // Short-circuit execution if the timestamp on this call doesn't match the last one made
                if (pendingCall.timeStamp != timeStamp) { return false; }

                // The action to take
                $('#graphContent').html(data);

                // Clear the reference to this timeout call
                pendingCall.procID = null;
            }
        });
    };

    // Clear the timeout on the last call made if it exists
    if (pendingCall.procID) {
        clearTimeout(pendingCall.procID)
    };

    // Update the timeout call tracker
    pendingCall = { timeStamp: timeStamp, procID: setTimeout(printCall, 3000) };
});

这篇关于通过x秒延时Ajax请求并更新只有最后一个被点击的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！