javascript回调问题

时间:2012-08-07 05:13:23

标签: javascript function callback

我真的不明白回调是如何运作的。这是代码(第49-53行是问题所在,我希望n等于我目录中的图像数量):http://pastebin.com/HbALuzGE。我希望onerror回调立即发生(因为play()调用使用我的n var的change()),但事实并非如此,但我不知道如何纠正它。

1 个答案:

答案 0 :(得分:0)

将回调视为异步运行函数的方法或方法。通常,实现回调包括将函数作为参数或参数传递给现有函数。如果指定,则在满足条件的情况下将调用此第二个函数一次。如果我们想确保第一个函数的执行上下文已经执行并且只传递给第二个函数,这非常有用。这样我们就可以确保只有在第一个函数完全执行时才会访问第二个函数。

使用回调的最佳示例是服务器请求和时间动画,其中确保在函数内执行的方法已经完全满足是绝对重要的。以下是使用回调的一个非常简单的示例:

function start(num1, num2, callback) {
    console.log ("Number 1 is: " + num1 + " and Number 2 is : " + num2);
    sum = num1 + num2;
    if (callback) {
        callback(sum);
    }
}

start(8, 2, function(sum) { console.log ("Sum is: " + sum); });

我认为你应该简化你的代码。也许我错了,但我认为当你定义一个图像计数器i时问题出现在最后一个函数中,但是当你传递给onload函数时,你正在创建另一个执行上下文/闭包。

修改

分析您的代码我得到了以下解决方案。您可以使用以下内容遍历图像资源中的图像:

var images = [...];

for (var i = 0; i< images.length; i++) {
    var img[i] = new Image();
    img[i].onload = (function(img) {    
        return function () {
          // do something here
        }

        img[i].src = images[i];
    })(i);          
}

......或其他方式:

function loadImages(images, callback) {
    var loadedImages = 0;

    for(var i=0; i< images.length; i++) {
      images[i] = new Image();
      images[i].onload = function() {
        if(++loadedImages >= images.length) {
          callback(images);
        }
      };
      images[i].src = images[i];
    }
  }

  window.onload = function(images) {

    var sources = [...]

    loadImages(sources, function(images) {
      // do something
    });
  };

在这种情况下,返回函数很重要,因为这样您就可以将执行委托给另一个函数。希望这有帮助,但我必须管理它,你不是很清楚你想要做什么。