Javascript 函数完成后如何执行代码

我有一段代码，其中基本上创建了一个函数，在jqueryajax的帮助下，我获取一个值并将其设置为元素的数据属性

然后在调用函数之后，我将数据值存储在一个变量中

但问题是我不想在ajax函数完成之前执行任何代码

JS

function load_data(){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar')
       }
    })
}

---

如何实现这一点？

您可以在

load\u data

中接收回调函数，并在

success

函数中执行它。大概是这样的：

function load_data(callback){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           callback();
       }
    })
}

load_data(function() {
  console.log($('.element').data('foo'));
});

---

当然，如果这是您的真实场景，您可以简单地将

console.log（$（'.element'）.data（'foo'））放在下面

直接在

success

函数中。

您可以使用，Async wait

此外，您还可以使用回调来完成

function load_data(callback){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           callback();
       }
    })
}

function doItLater(){
    console.log($('.element').data('foo')) //then execute this line
}

load_data(doItLater); //let the function set data first

您可以将数据作为参数传递给doItLater，以将数据获取到当前作用域。

尝试使用.done（）

---

内部代码将在您的ajax调用被响应并且

dataResponse

具有来自您的ajax调用的任何响应后运行ajax是异步的。所以，你必须倾听成功事件并做好自己的事情。通过使用wait/async，您可能会获得与您的需求类似的结果

---

由于异步ajax调用，这不可能直接实现

有两种方法可以实现你想要的

1.

• 为ajax请求成功后要执行的代码创建函数

• 从ajax成功块调用该函数

例如

2

• 在

  load\u data

  函数中返回

  $.ajax

• 并使用

  。然后

  或

  完成

  函数加载数据本身

例如

---

但是，.done和.then的行为不相同。特别是，如果标准承诺回调返回另一个承诺，这将延迟所有后续承诺的解析。jQuery的行为是这样的，但done没有。完成的回调不可能延迟以后回调的解析。

设置元素属性后，您可以将控制台日志放在成功回调中

如果您不希望将控制台日志写入load_数据（可能您希望使load_数据可重用，而不使用控制台日志），可以将控制台日志放入回调函数中，并将回调传递给load_数据，然后在ajax成功函数中调用它：

功能加载\u数据（cb）{
$.ajax({
.....,
成功：功能（响应）{
$（'.element'）.attr（'data-foo'，'bar'））
cb（）；
}
})
}
函数回调（）{
console.log（$（'.element'）.data（'foo'））
}
加载_数据（回调）将该行代码放入“success”回调中。这就是回调for@Pointy是的，我也想过，但我正在寻找其他的选择。可能通过使用async await
$。ajax
不会返回一个承诺afaik，因此await会抛出一个错误。@Jaxi是的，它会返回一个承诺Promise@Pointy啊，很公平！
async function load_data(){
    await $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar')
       }
    });
    console.log($('.element').data('foo')) //then execute this line
}
load_data(); //let the function set data first


function load_data(callback){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           callback();
       }
    })
}

function doItLater(){
    console.log($('.element').data('foo')) //then execute this line
}

load_data(doItLater); //let the function set data first

load_data()
   .done(function(dataResponse){
           console.log($('.element').data('foo')) //then execute this line
   }); //let the function set data first

const load_data = async () => {
    return await fetch('https://exmaple.com');
}

load_data();

$('.element').attr('data-foo', 'bar')

function load_data(){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           console.log($('.element').data('foo')); // Your code goes here
       }
    })
}

function load_data(){
    return $.ajax({
       .....,
           success: function (response) {
               $('.element').attr('data-foo', 'bar')
           }
        })
}

load_data().done(function() {
  console.log($('.element').data('foo')); // Your code goes here
});