javascript - javascript回调问题

Question

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

Answer 1

将回调视为异步运行函数的方法或方式。通常实现回调包括将函数作为参数或参数传递给现有函数。如果指定，则在满足所施加的条件时将调用第二个函数一次。如果我们想确保第一个函数的执行上下文已经执行，然后才传递给第二个函数，这很有用。这样我们将确保只有在第一个函数完全执行后才访问第二个函数。

使用回调的最佳示例是服务器请求和时间动画，其中确定函数内部执行的方法已完全满足是绝对重要的。这是一个使用回调的非常简单的示例：

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
    });
  };

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