Question

我有以下代码：

var vocabWords = [];
//display each vocab words
$.getJSON("getData.php", function (data) {

    $.each(data, function (key, val) {
        vocabWords.push({
            'id': val['id'],
            'audioURL': val['audioURL']
        });
        setTimeout(function () { //onclick="play_sound(\''+val['audioURL']+'\');" 
            $(".vocab-list").append($('<li onclick="play_sound(\'' + val['audioURL'] + '\');"  class="vocab-word" id="vocab_' + val['id'] + '"><img width="230px" height="230px" src="' + val['imageURL'] + '" /><div><i class="fa fa-play-circle"></i>' + val['word'] + '</div></li>').hide().fadeIn(600));
            play_sound(val['audioURL']);
        }, key * 3000);
    });
    alert(vocabWords[2]['audioURL']);

}); //end display vocab words

alert(vocabWords[2]['audioURL']);

第一个alert()工作......并显示正确的信息，但第二个没有......我做错了什么？

Answer 1

对我来说：getJSON（）函数是异步的，并在接收数据时调用提供的函数。立即调用第二个alert（），这几乎肯定是在返回数据之前。

换句话说，这就是事情发生的顺序：

getJSON（）调用
第二个警告（）名为
数据到达
使用第一个alert（）调用

Answer 2

Javascript本质上是异步的。这意味着第一个警报在从服务器（getData.php）收到数据之前触发。

这是因为调用触发，并且让javascript知道它将在服务器实际返回响应时完成回调函数。

更简洁的方法是使用promise对象 - 看一下 - 下面的代码使用了一个承诺

$.when($.getJSON('url',function(data){ // do stuff to data in here }).done(function(){ // carry on normal execution flow here });

如果您需要在继续执行之前的操作之前确保响应，这非常有用，尽管这可能不是最佳做法。

Answer 3

默认情况下，在JavaScript / jQuery中发出HTTP请求异步。这意味着，您无法将其视为顺序代码。

您在getJSON调用中创建的函数不会立即执行。一旦请求成功返回，它就会被调用。但是，第二个警报会在您启动请求后立即执行，此时该请求尚未返回。

数组不在函数外工作

3 个答案: