对回调感到困惑

Question

我开始学习JS并遇到了回调和承诺。我有点困惑，阅读了几十个来源，但无法找到答案。例如来自mozilla的代码

var xmlhttp = new XMLHttpRequest(),
method = 'GET',
url = 'https://developer.mozilla.org/';

xmlhttp.open(method, url, true);
xmlhttp.onload = function (data) {
   console.log(data)
};
xmlhttp.send();

来自onload的描述：

  

回调是请求成功完成时要执行的函数。它接收ProgressEvent对象作为其第一个参数。此值（即上下文）的值与此回调相关的XMLHttpRequest相同。

它实际从哪里获得ProgressEvent？我应该如何区别于

var myFunc = function (data) {
    console.log(data);
}
myFunc('ALERT!!!');

我不应该将参数传递给函数吗？

Answer 1

回调是函数作为参数传递给稍后要执行的另一个函数。在您的情况下，您希望在XMLHttpRequest完成其工作后执行某些操作。所以你需要传递一个成功函数，在ajax完成加载它的内容之后执行。

为什么我们使用回调？

完成加载后，您可能希望对http请求的结果执行某些操作。您无法在onload处理程序中执行此操作。

xmlhttp.onload = function(result){
    // do stuff with result
}

但是您需要在onload事件处理程序中编写大量代码。通过传递回调，您可以保持工作区的清洁。编写代码以处理回调内的结果。请参阅以下代码

 function ajax(callback){

  var xmlhttp = new XMLHttpRequest(),
  method = 'GET',
  url = 'https://developer.mozilla.org/';

  xmlhttp.open(method, url, true);
  xmlhttp.onload = function (data) {
     callback(data) // your callback will execute after http request finish loading
  };
  xmlhttp.send();

}

function success(result){ // this function will be used as callback 
   // do stuff with result.
}

// call ajax function and pass the callback function to be executed after loading

ajax(success)

ProgressEvent :

ProgressEvent 对象包含与当前请求状态关联的数据。以下是您的进度事件对象。请参阅红色下划线属性。 loaded 是字节数loaded.and total 是要加载的总字节。这实际上是数据大小。因此，您可以确定要加载的字节数和实际加载的字节数。如果这两个属性类似然后加载完成。这是onload做什么。加载完成后两者都是191（字节）。我有一个大小为191字节的文件。这意味着加载完成。

Answer 2

回调参数由代码的任何部分稍后执行该函数提供。在这种情况下，这样的代码由浏览器本身执行，并且作为浏览器库，您可以检查没有JavaScript源代码。

使用纯JavaScript示例可能更容易理解：

＆＃13;

＆＃13;

function printMessageInConsole(message) {
    console.log("Message is: %s", message);
}
function doSomeStuff(runThisWhenFinished) {
    runThisWhenFinished("I am finished with it");
}

doSomeStuff(printMessageInConsole);

＆＃13;

＆＃13;

＆＃13;