функция JQuery действует асинхронно

Question

Это выводит 456 на оба Data элемента и консоль (как ожидалось):

function getData() { 
 
    jQuery('#Data').html(456); 
 
} 
 

 
jQuery(function($) { 
 
    getData(); 
 
    console.log($('#Data').html()); //456 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Data">123</div>

---

Это выводит 456 к Data элементу, но консоль показывает он не изменился как 123:

function getData() { 
 
    jQuery(function($) { 
 
    $('#Data').html(456); 
 
    }); 
 
} //getData  
 

 
jQuery(function($) { 
 
    getData(); 
 
    console.log($('#Data').html()); //123 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Data">123</div>

---

Ввод console.log() в тайм-аут фиксирует это:

function getData() { 
 
    jQuery(function($) { 
 
    $('#Data').html(456); 
 
    }); 
 
} //getData  
 

 
jQuery(function($) { 
 
    getData(); 
 
    setTimeout(function() { 
 
    console.log($('#Data').html()); //456 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Data">123</div>

---

я могу обойти эту проблему, но это удивительно.

Является ли это ошибкой или ожидаемой функциональностью?

Answer 1

Ожидаемая функциональность. Когда вы сделаете

function getData() { 
    jQuery(function($) { 
    $('#Data').html(456); 
    }); 
} 

Вы прикрепляете обработчик к событию. А именно, событие готовности документа. Это потому, что

jQuery(function($){ 
}); 

представляет собой сокращенную

jQuery(document).ready(function($){ 
}); 

Вы делаете это дважды. После того, как правило, когда вы делаете

jQuery(function($) { 
    getData(); 
    console.log($('#Data').html()); //123 
}); 

и внутри этого обработчика, вы присоедините другой обработчик при вызове getData.

Таким образом, console.log выполняется перед выполнением следующего обработчика событий.

Answer 2

Теперь я понимаю свою ошибку и спасибо @AmmarCSE за помощь.

У меня есть своя функция знака доллара, и я делал это в некоторых функциях, так что я мог бы использовать функцию JQuery вместо:

jQuery(function($) { 
}); 

Что я должен делать это:

(function($) { 
})(jQuery); 

Тогда все работает, как ожидалось:

function getData() { 
 
    (function($) { 
 
    $('#Data').html(456); 
 
    })(jQuery); 
 
} //getData  
 

 
(function($) { 
 
    getData(); 
 
    console.log($('#Data').html()); //456 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Data"></div>