Question

我有一个代码，基本上我创建了一个函数，其中，借助于jQuery ajax，我获取了一个值并将其设置为元素的数据属性。

然后在调用函数后，将数据值存储在变量中。

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

JS

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

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

如何实现？

Answer 1

您可以在load_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函数中。

Answer 2

您可以使用异步等待。 https://javascript.info/async-await

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

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

Answer 3

尝试使用.done（）

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

响应ajax调用并且dataResponse收到ajax调用的任何响应后，内部代码将运行

Answer 4

Ajax是异步的。因此，您必须倾听成功事件并做自己的事情。通过使用await / async

，您可能会实现与您的需求相似的目标

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/async_function

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

load_data();

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

Answer 5

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

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

1。

为成功执行Ajax请求后要执行的代码创建一个或多个函数
从ajax成功块中调用该函数

例如。

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

2

在$.ajax函数中返回load_data
并对load_data本身使用.then或.done函数

例如。

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
});

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

Answer 6

设置元素属性后，您只需将控制台日志放入成功回调中即可。

如果您不希望将控制台日志写在load_data内（也许您想使load_data可重用，而没有控制台日志），则可以将控制台日志放入回调函数中，并将回调传递给load_data并在其中调用ajax成功功能：

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

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

load_data(callback);

另一种选择是在ajax设置对象中设置async: false，这将阻止在ajax函数解析之前执行以下代码，但这通常不是推荐的做法。

功能完成后如何执行代码

6 个答案: