jquery.each() 之后的回调？ ajax功能太慢，屏幕刷新时间不够答案

【问题标题】：Callback after jquery.each()? Too slow ajax function, not enough time for screen refreshingjquery.each() 之后的回调？ ajax功能太慢，屏幕刷新时间不够
【发布时间】：2012-12-29 01:32:37
【问题描述】：

我的应用程序中有两个 javascript/jquery 函数，总是有 refresh() 函数，它从数据库中获取数据并重绘前端视图。

其中一种方法是将数据发送到PHP函数中，它可以简单地插入MySQL数据库，然后对其进行编辑，在这里（它们是相同的，所以我只发布一个）：

function insertedit()
{
$('.res').each(function()
{
    $.post("/controller/method/",{id: id},function(data,status,xhr)
    {
        if(status=="success")
        {
        }
    })
});     

refresh();
}

当我尝试使用此函数插入数据时，一切正常，并且我的视图正在异步重绘，但是当我尝试使用它编辑数据时 - 我必须刷新页面才能看到更新的视图。我认为，该编辑操作比插入和我的刷新功能需要更多时间，它从 SQL 中抓取数据只是抓取旧数据（未删除的记录） - 我该如何修复它？

编辑

$(function()
{
 refresh();
});



function insertedit(){
  var $promises = [];
  $('.res').each(function()
  {

    $promises.push(
    $.post("/controller/metgod/",{id, id},function(data,status,xhr)
    {
        if(status=="success")
        {
        }
    })
    );
});     

$.when.apply($, $promises).then(function() {
    refresh();
});
}

【问题讨论】：

你应该等到所有 ajax 请求都完成后再刷新
我知道，但是怎么做呢？
使用.detach() 重新绘制的东西更快 - 你仍然可以使用 jQuery 对其进行操作，然后将其粘贴到使用 .appendTo() 或类似的位置，因此它不会重新绘制HTML，就在 DOM 中。
您将使用 $.when()，将每个 ajax 请求作为参数映射到 $.when()，然后在 .then() 上刷新。看这里的例子：stackoverflow.com/questions/5401969/…
还应该考虑使用所有 ID 发出一个 ajax 请求，而不是多次请求。返回 JSON 以匹配您发送的 ID 并循环

标签： php jquery ajax

【解决方案1】：

使用承诺

function insertedit()
{
  var $promises = [];

  $('.res').each(function(id){
    var $this = $(this);

    $promises.push(
      $.post("/controller/method/", {'id': $this.attr('id')}, function(data,status,xhr){
        $this.text(data); // success
      })
    );
  });

  $.when.apply($, $promises).then(function(){
    refresh();
  });     
}

在这里查看小提琴，它可以工作http://jsfiddle.net/69eMp/4/

【讨论】：

$.post 已经返回了承诺，我在通话结束时删除了promise()。我认为您使用的是 jQuery 1.7 或更高版本。
顺便说一句，我不知道你从哪里得到id，确保你传递了正确的参数，因为你的原始代码看起来被破坏了（或者是伪代码）
你能看看我编辑的问题吗？我正在按照你的方式做，我仍然需要刷新页面..
@FrederikWordenskjold 它不起作用，因为when 需要参数而不是数组，这就是需要应用的原因。
@pawel 看来您正在使用伪代码，或者您不知道自己在做什么。你错过了你的id，你从哪里得到的？

【解决方案2】：

我曾经使用过这样的解决方案，这是我的解决方案（这是一个现场演示 here）：

/**
 * Class that will handle delayed function calls
 * @param fn     the funciton to call
 * @param ctx    the context to use as 'this' inside the function
 * @param delay  delay in millis
 */
var AsyncCall= function(fn, ctx, delay) {
   var timer = null;

   ctx   = ctx || window;
   delay = delay || 1;

   return function() {
       // prevent calling the delayed function multiple times
       if (timer) clearTimeout(timer);

       var args = arguments;

       timer = setTimeout(function() {
          timer = null;
          fn.apply(ctx, args);
       }, delay);
   };
};

// wrap the 'refresh' funciton inside the async call object with a 200 millis delay
var refreshAsync = new AsyncCall(refresh, null, 200);

function insertedit()
{
$('.res').each(function()
{
    $.post("/controller/method/",{id: id},function(data,status,xhr)
    {
        if(status=="success")
        {
        }

        // schedule calling 'refresh'
        refreshAsync();
    })
});
}

首选此方法的原因是您不必刷新每个 Ajax 请求。这样，与每次刷新相比，它执行refresh 函数的次数会更少。并且 200 毫秒不是那么长，但足以让 Ajax 调用返回并且不会被用户注意到。

【讨论】：