要异步还是不异步ajax请求?什么时候可以使用async = false?

时间:2016-02-24 15:26:00

标签: javascript jquery ajax asynchronous

我理解表单读取很多帖子在ajax请求上的async = false实际上并不是ajax请求的方法。但是有没有办法让我知道差异决定使用哪一个或总是使用异步?

我目前面临着使用回调理解ajax和ajax以及何时使用回调的挑战。我有一个按钮,我点击这里,以便我可以将grialicious http://suprb.com/apps/gridalicious/附加到我需要的项目#my-grid div container。但是,ajax请求将在返回我的项目后始终运行。因此,我现在唯一能够完成这项工作的方法是request.async=false使其同步工作。但这种方法是正确的吗?或者有更好的方法来重构我的代码吗?

$('#loadMoreButton').click(function(){
  var $grid = $('#my-grid').gridalicious('append',loadMoreUserFeed());
})


function loadMoreUserFeed(){

  var loadMoreButton = $('#loadMoreButton')
  var items = new Array;

  var request = {

    success: function(response){
      $.each(response.results.items,function(){

        myitem = document.createElement('div');
        myitem.className = 'my-item';

        items.push(myitem)

      }
    },
    error: function(response){
      debugger;
    }
  }

  request.dataType= 'json';
  request.contentType = 'application/json';
  request.data = $(this).serialize();
  request.scriptCharset = "utf-8";
  request.url = '/my_url';
  request.type = "GET";
  request.async = true;

  $.ajax(request);

  return items;

}

当我使用request.async=false时,我收到以下消息。但是当我执行request.async=true时,在我的请求完成之前,我的项目列表之前将返回一个空数组。

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

要异步还是不异步ajax请求?什么时候可以使用async = false?如果选择保持异步。我该如何构建ajax的执行?

修改

以下是我提出的一项建议更改,以启用async = true:

$('#loadMoreButton').click(function(){

  loadMoreUserFeed()

})


function loadMoreUserFeed(){

  var loadMoreButton = $('#loadMoreButton')
  var items = new Array;

  var request = {

    success: function(response){
      $.each(response.results.items,function(){

        myitem = document.createElement('div');
        myitem.className = 'my-item';

        items.push(myitem)

      }
      $('#my-grid').gridalicious('append',items);
    },
    error: function(response){
      debugger;
    }
  }

  request.dataType= 'json';
  request.contentType = 'application/json';
  request.data = $(this).serialize();
  request.scriptCharset = "utf-8";
  request.url = '/my_url';
  request.type = "GET";
  request.async = true;

  $.ajax(request);

}

但我不知道这是否是最佳方法。

编辑2

$('#loadMoreButton').click(function(){

  loadMoreUserFeed(makeDivItems)

})


function loadMoreUserFeed(callback){

  var request = {

    success: function(response){
      callback()
    },
    error: function(response){
      debugger;
    }
  }

  request.dataType= 'json';
  request.contentType = 'application/json';
  request.data = $(this).serialize();
  request.scriptCharset = "utf-8";
  request.url = '/my_url';
  request.type = "GET";
  request.async = true;

  $.ajax(request);

}


function makeDivItems(){

  var items = new Array;

  $.each(response.results.items,function(){

    myitem = document.createElement('div');
    myitem.className = 'my-item';

    items.push(myitem)

  }
  $('#my-grid').gridalicious('append',items);
}

0 个答案:

没有答案