0

我在 JQuery 中遇到了 $.ajax() 的问题。旧的 ajax 查询覆盖较新的 ajax 查询。

我正在实现一个网站，当用户更改过滤器参数时，列表将相应更新。

所以逻辑是这样的：

  1. 用户选择过滤器选项
  2. 进行了 AJAX 查询。请求异步完成后，将列表刷新到较新的列表。

当用户过滤速度非常快时，就会出现问题。1. 用户过滤条件 A 在时间 T 2. 向后端服务器发出 AJAX 请求，假设需要 5s 响应并返回。3.届时用户过滤条件B T+1s。4. 对后端服务器的AJAX请求，假设响应和返回需要500ms。5. 从第 4 步开始，我的列表将更新为标准 A 6. 但是，在 5 秒内完成第 2 步后，响应返回，我的列表将更新为旧的标准 A！

这是我在做 AJAX 时遇到的一个大问题。有人可以帮忙吗？是否可以选择忽略旧请求？

4

3 回答 3

0

好的，我假设有一个 AJAX 发布整个表单，看起来像这样：

/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find( 'input[name="s"]' ).val(),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { s: term } );

  /* Put the results in a div */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#result" ).empty().append( content );
  });
});

您所做的就是在函数之外添加一个变量，例如：

var started = false;

/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
    if(!started)
    {
        started = true;

        /* stop form from submitting normally */
        event.preventDefault();

        /* get some values from elements on the page: */
        var $form = $( this ),
        term = $form.find( 'input[name="s"]' ).val(),
        url = $form.attr( 'action' );

        /* Send the data using post */
        var posting = $.post( url, { s: term } );

        /* Put the results in a div */
        posting.done(function( data ) {
        var content = $( data ).find( '#content' );
        $( "#result" ).empty().append( content );
        });

        started = false;
    }

});

然后它会在再次 ajaxing 之前检查它是否首先运行，记住在完成后将 start 设置为 false。

于 2013-08-12T11:56:11.813 回答
0

您可以通过调用 abort() 方法忽略之前的 ajax 请求

var filterRequest= $.ajax({
type: "POST",
url: "some Url",
data: "{}",
success: function(response){
   alert( "Response recieved: " + response );
}});

取消请求：

filterRequest.abort();
于 2013-08-12T12:02:13.553 回答
0

我已经设法使用时间戳解决了这个问题。

首先在加载文档时，设置时间戳

$(document).ready(function(){
window.TIMESTAMP = Date();//initialize with current datetime
}

/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find( 'input[name="s"]' ).val(),
      url = $form.attr( 'action' );

  var time_sent = new Date();

  /*only if the time_sent is later than the TIMESTAMP
  if (time_sent > Date(window.TIMESTAMP)){
      /* Send the data using post */
      var posting = $.post( url, { s: term } );

      /* Put the results in a div */
      posting.done(function( data ) {
        var content = $( data ).find( '#content' );
        $( "#result" ).empty().append( content );
        //update the time stamp
        window.TIMESTAMP = time_sent;
      });
    });
  }
于 2013-08-13T15:41:33.023 回答