在继续相同的方法之前等待外部 JS 函数

Question

我有一个简单的 JS 函数定义如下：

function firstFunction() {
    $.ajax({
        url: "/path/to/my/endpoint",
        type: "GET"
    }).done(function (data) {
        localStorage.setItem("myItem", data);
    });
}

稍后，我定义了另一个函数，如下所示：

function mySecondFunction() {
    if(localStorage.getItem("myItem") == null) {
        // Here I want to call firstFunction() and stop everything until it finishes
    }

    //Immediately use localStorage.getItem("myItem") for other purposes
    //no matter I entered the if() or not
}

通过 $.ajax 中的简单 async: false，它可以工作，但我看到它会被弃用，我想避免使用此解决方案 .

你能建议在输入我的 if() 时如何等待 mySecondFunction 吗？

我试过 $.when() 但没有成功，也许我做错了什么？

我试过

   function mySecondFunction() {
      var deferred = $.Deferred();

      if(localStorage.getItem("myItem") == null) {
           $.when(firstFunction()).then(function () {
                    deferred.resolve();
                })
      }
      else {
         deferred.resolve();
      }

      //other instructions
    }

但是 other instructions 在 firstFunction()

结束之前被调用

Answer 1

只需将 if 子句更改为 while 循环并在该循环中调用 firstFunction。

示例：

function mySecondFunction() {
    while(localStorage.getItem("myItem") == null) {
        firstFunction()
    }
}

Answer 2

做出firstFunction()return的承诺。

function firstFunction() {
    return new Promise((res, err) => {
        $.ajax({
            url: "/path/to/my/endpoint",
            type: "GET"
        }).done(function (data) {
            localStorage.setItem("myItem", data);
            res()
        });
    });
}

制作 mySecondFunction aysnc.

async function mySecondFunction() {
    if(localStorage.getItem("myItem") == null) {
        await firstFunction();
    }

    localStorage.getItem("myItem")
    ...
}

我建议您这样做，因为 ajax 请求不会阻止其他代码的执行，例如按钮回调。 Async/await promise 一开始很难掌握，所以这里有一些关于它们在幕后如何工作的阅读材料。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

在继续相同的方法之前等待外部 JS 函数

Wait for an external JS function before continuing the same method

javascript

jquery

asynchronous

wait

promise