Async/Await 与 JQuery 文档 READY

Posted 2023-03-08

【中文标题】Async/Await 与 JQuery 文档 READY

【英文标题】：Async/Await with JQuery document READY

【发布时间】：2021-12-27 05:41:56

【问题描述】：

它适用于document.addEventListener("DOMContentLoaded", async () => )，但我很好奇让它适用于 JQuery。

另外，我希望使用 Async/Await，不是 promises，因为稍后我将需要 promise 回调之外的变量。

let products = [];

$(document).ready(async function()       // Does not work with ASYNC
    await getProducts();                  // IF i dont use async await, products = empty
    products.forEach(product => console.log(product))
)

const getProducts = () => 
   // Ajax call to server
   // products = ajaxResult;              // asign variable to result
   // returns Promise;

【问题讨论】：

你说的“不起作用”是什么意思？另外... “稍后我将需要 promise 回调之外的变量” async / await 并不能为您解决这个问题

1.如果我在函数旁边使用 ASYNC，它根本不会运行。 2. 我的意思是我稍后会在程序中多次需要 products 变量。所以我希望先分配它，然后在不使用 getProducts().then()

的情况下轻松使用它

在这里工作正常~jsfiddle.net/d40cjmfL

@Phil 我检查了我的 JQuery，它的版本是 3.2.1。会不会是因为这个？

似乎你已经找到了问题，它也无法在 JSFIddle 上使用该版本。适用于 3.3.1 及更高版本。问题转载在这里~jsfiddle.net/d40cjmfL/2

【参考方案1】：

问题是由于 JQuery 版本 3.2.1 和可能在某些较低版本中造成的。 $(document).ready(async function() ) 不过可以在以后的版本中使用。

$(document).ready( handler ) 已弃用为下面提到的@Phil。

$(handler)建议改用。 JQuery docs

【讨论】：

仅供参考 $(document).ready( handler ) 语法已弃用。 jQuery docs 中的建议是使用 $( handler )

@Phil 是的，谢谢，我忘了提。