Question

我使用jquery 1.8.2
我有这些函数（下面），但是我想在foo（）完成时调用bar（）函数。我怎样才能做到这一点？

function foo() {
  //something time consuming
  console.log("foo")
}
function bar() {
  console.log("bar");
}
function helloWorld() {
  foo();
  bar();
}

Answer 1

你有几种方法可以做到这一点。现在，我可以想到我经常使用的两个。第一个（也是最容易理解的）是使用回调。只需将您要调用的第二个函数作为参数传递给它。

<canvas id="canvas" width="200" height="200" />

 var canvas;
        var ctx;
        var lastend = 0;
        var pieColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
    var pieData = [10,30,20,60,40];
        var pieTotal = 10 + 30 + 20 + 60 + 40; // done manually for demo

        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var hwidth = ctx.canvas.width/2;
        var hheight = ctx.canvas.height/2;


        for (var i = 0; i < pieData.length; i++) {
                ctx.fillStyle = pieColor[i];
                ctx.beginPath();
                ctx.moveTo(hwidth,hheight);
                ctx.arc(hwidth,hheight,hheight,lastend,lastend+
                  (Math.PI*2*(pieData[i]/pieTotal)),false);


                ctx.lineTo(hwidth,hheight);
                ctx.fill();

                //Labels on pie slices (fully transparent circle within outer pie circle, to get middle of pie slice)
                //ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; //uncomment for debugging
    //          ctx.beginPath();
    //          ctx.moveTo(hwidth,hheight);
    //          ctx.arc(hwidth,hheight,hheight/1.25,lastend,lastend+
    //            (Math.PI*(pieData[i]/pieTotal)),false);  //uncomment for debugging 

                var radius = hheight/1.5; //use suitable radius
                var endAngle = lastend + (Math.PI*(pieData[i]/pieTotal));
                var setX = hwidth + Math.cos(endAngle) * radius;
                var setY = hheight + Math.sin(endAngle) * radius;
                ctx.fillStyle = "#ffffff";
                ctx.font = '14px Calibri';
                ctx.fillText(pieData[i],setX,setY);

    //          ctx.lineTo(hwidth,hheight);
                //ctx.fill(); //uncomment for debugging

                lastend += Math.PI*2*(pieData[i]/pieTotal);
    }

（JSFiddle）

这不需要任何额外的库，但是当你有很多异步的东西时，代码很快变得一团糟。

另一个解决方案，更难以理解，但更强大，是使用Promises。

Promise是通过提供适当的方法来处理异步代码的好方法。唯一的缺点是你需要学习它们，并使用外部库。

编辑：正如所指出的，我没有使用JQuery API。以下是使用它的方式：

function foo(callback) {
    setTimeout(function(){
        console.log("foo");
        callback();
    }, 500);
}

function bar() {
    console.log("bar");
}

function helloWorld() {
    foo(bar)
}

helloWorld();

（JSFiddle）

以下示例基于Q。

function foo() {
    var deferred = jQuery.Deferred();
    setTimeout(function(){
        console.log("foo");
        deferred.resolve();
    }, 500);
    return deferred.promise();
}

function bar() {
    console.log("bar");
}

function helloWorld() {
  foo().then(bar);
}

helloWorld();

（JSFiddle）

Answer 2

function method1（）{ //一些代码

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

Answer 3

简单如下：

<强> DEMO

function foo() {
  var deferred=$.Deferred(); //create a deferred object
  console.log("foo");
  return deferred.resolve() //once logging done resolve it and send back
}
function bar() {
  console.log("bar");
}
function helloWorld() {
  $.when(foo()).done(bar()); //you can use $.when and done
}
$(document).ready(function(){
  helloWorld();  
})

其他第一个功能完成时的调用功能（回调）

3 个答案: