0

我在回调方面遇到了麻烦，主要是因为我不明白它们是如何工作的（或应该如何工作）。

我有我的功能：

function checkDuplicateIndex(values, callback) {
    $.ajax({
        type: "POST", 
        url: url, 
        data: "command=checkIndexAlbumTracks&" + values,
        dataType: "html",
        success: function(data){
            var returnValue = data.d;   
            callback(returnValue);
        }
    });
}

然后在提交事件中，如何正确调用 checkDuplicateIndex 以便我可以 alert() 值？

4

2 回答 2

5

这最终是一个很长的答案，所以我将尝试将它分成几部分。

Javascript 中的函数

因此，在 javascript 中，函数是一个可以传递、分配给变量等的对象，就像任何其他数据类型一样。不同之处在于，函数不是一串文本、数字等，而是等待执行的代码块。

这通常会让刚开始编程的人感到困惑，因为通常在您编写代码时，它会在您运行程序时执行。但对于函数，情况并非如此。当您在函数内编写代码时，它会等待在那里不执行，直到您调用该函数。如果您不调用该函数，则永远不会执行代码。让我们看一个简单的例子：

function say_hello(){
  console.log('hello!');
}

您在此处看到的称为函数声明。这意味着您正在创建一个函数，这是一个等待执行的代码块。如果您运行此代码，控制台将不会记录任何内容。现在让我们看一个函数调用。

function say_hello(){
  console.log('hello!');
}

say_hello();

所以在这里我们像之前一样声明函数，但下面我们调用它。函数调用只是函数的名称，后跟打开和关闭括号。如果函数接受参数，它们将在括号内，但现在无需担心。如果您要运行此代码，您实际上会看到hello!已登录到控制台，因为调用了该函数，该函数执行了里面的代码。

异步代码

现在，让我们切换一下。当您进行 jquery ajax 调用时，jquery 会将大量代码抽象到库中。他们负责设置，将XMLHttpRequest其发送到您指定的位置，并收集结果，并且他们以跨浏览器工作的方式执行此操作。但是由于 javascript 是异步的，一旦 ajax 调用结束，javascript 就会在 ajax 调用之后继续执行代码，因为谁愿意等待其他人的服务器响应而您仍然可以从事这项工作。所以，如果你触发这样的事情：

$.ajax({
  url: 'http://google.com',
  success: function(){ console.log('done!') }
});

console.log('after ajax call');

...您可能会惊讶地发现它在记录after ajax call 之前记录done!。这是因为，如前所述，处理 I/O 的 javascript 调用通常是异步的。

因此，如果进行了 ajax 调用，并且即使 ajax 调用尚未完成，它也会立即继续执行代码，我们如何指定在它完成时将运行的代码？这就是一切融合在一起的地方。通过为 jquery 提供一个函数，我们记得它是一个未执行的代码块，我们可以为自己提供一种方法来编写仅在 ajax 调用完成后执行的代码，方法是将未执行的代码块传递给 jquery 并本质上说“嘿 jquery，获取这段代码，当 ajax 调用完成后，调用它并传入你从中得到的任何数据。” 多么方便！

我们这样做的方式是通过jquery 的 ajax 函数success的和error属性。如果请求成功，它将调用我们传递给的函数，我假设您可以猜到如果出现错误会发生什么。success

把它们放在一起

异步代码和一等函数是 javascript 中最令人困惑的两个部分，一旦您理解了这两个概念，您将处于一个很好的位置，尽管可能需要一段时间才能到达那里。因此，仔细考虑并进行实验很重要。让我们通过几种方法来处理您正在使用的示例，关于 jquery ajax。

首先，我们可以尝试制作自己的函数并将函数的名称传递给成功处理程序。然后当它回来时，它会调用该函数。让我们来看看：

var my_callback = function(data){
  console.log(data);
}

$.ajax({
  url: 'http://google.com',
  success: my_callback
});

这是一种有趣的方式。在这里，我们为变量分配了一个匿名函数，然后将变量名传递给了成功处理程序。这将正常工作。现在让我们尝试另一种方式：

function my_callback(data){
  console.log(data);
}

$.ajax({
  url: 'http://google.com',
  success: my_callback
});

在这里，我们定义了一个命名函数并做同样的事情。这将以相同的方式工作。javascript中的命名函数实际上可以在使用后声明，因此您可以将函数声明移到ajax调用下方，它仍然可以工作。试试这个。这是命名函数的一个很好的优势。

最后，让我们看一下我们可以处理它的第三种方法：

$.ajax({
  url: 'http://google.com',
  success: function(data){
    console.log(data);
  }
});

在这里，我们在成功处理程序上直接内联定义了一个匿名函数。这与其他两个选项中的任何一个完全相同。在所有这三种方式中，jquery 都会收到一个函数声明，并在需要时调用它，也就是在 ajax 请求返回之后。

我知道这是一个超长的答案，但是您在这里感到困惑的是 javascript 的一些核心概念，我认为在这里回顾它们比仅仅解决您的问题并给您答案没有帮助更有帮助概念的解释。事实上，我这里根本没有真正解决你的问题，但是在理解了这些概念之后，你将很容易自己解决它。如果您仍然遇到问题，请发表评论，我会尝试澄清更多。

于 2013-09-19T04:48:15.617 回答
2

鉴于上面的代码，您可以在提交处理程序中这样调用它：

var values = '…';
checkDuplicateIndex(values, function(returnValue) {
    alert(returnValue);
    // additional processing here...
});
于 2013-09-19T04:23:09.860 回答