当一个功能的工作完成时

Question

我正在使用一个 jQuery 插件，它从一个 url 获取数据，获取、计算并在 div 中写入一些数据。

我想将这个div 的内容复制到另一个div，当那个函数工作时。

例如：

$("#div1").myfunction(); // it gets and calculates data and adds to #div1 . it needs 2-3 seconds to be done
var contents = $("#div1").html(); // when myfunction() done, copy contents
$("#div2").html(contents);

当我运行该代码时，#div2 中没有新内容。

Answer 1

你需要让myfunction 接受一个回调参数，它会在请求完成后执行

function myfunction(cb)
    $.ajax({
        type: "get",
        url: "page.html",
        success: function(data){
            $("#div1").html(data);
            if(typeof cb === 'function') cb();
        }
    });
}

myfunction(function(){
    $("#div2").html($("#div1").html());
});

Answer 2

您只需要输入这一行：

$("#div2").html($("#div1").html());

到myFunction中实现的ajax代码的成功回调中，以确保一旦客户端收到响应并将其插入到DOM中，操作就会发生。

Answer 3

Ajax 回调（例如success）将在 jQuery 1.8 中被弃用。相反，您可以使用 jQuery 的 deferred 对象来运行（或撤消）在执行之前需要更多条件的操作。

var successFunction = function() {
  var contents = $("#div1").html();
  var newElement = $("<div id=div2></div>").html(contents);
  $("body").append(newElement);
}

var failedFunction = function() {
  // reset element or undo last change
  window.alert("Update Failed");
}


$.when(
  $.ajax(countParams),
  doCalculate()
).then(
  successFunction(),
  failedFunction()
);

Creating Responsive Applications Using jQuery Deferred and Promises

Answer 4

如果您是编写插件的人，您应该将其硬编码到 AJAX 回调函数中，或者允许通过选项传入回调函数。

如果您无法控制插件，则必须不断查询您的 div 以查看它是否已更新：

var oldHTML = $("#div1").html(),
    counter = 0;

$("#div1").myfunction();

copyHTML();

function copyHTML()
{
    var newHTML = $("#div1").html();

    // we don't want this function to run indefinitely
    if (++counter > 15) return;

    if (newHTML == oldHTML)
        setTimeout(copyHTML, 1000);
    else
        $("#div2").html(newHTML);
}