关于同步异步回调！

最新推荐文章于 2024-09-30 15:42:36 发布

秋落落落落叶

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量63

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_59866374/article/details/129881311

版权

// 问题: 如何正确的输出 ok ？！

// functionTwo();

// function functionOne() {
// console.log("wait");
// setTimeout(() => {
// return true;
// }, 2000);
// }

// function functionTwo() {
// if (functionOne()) {
// console.log("ok");
// }
// }

==================分割线==========================

答案一 promise方法解决

/**

* 在这段代码中， functionOne 使用 setTimeout 函数模拟一个延时一秒的异步操作。当 setTimeout 完成后，它会执行回调函数并返回 true ，但是此时 functionOne 已经执行完毕并返回 undefined 了，因为 setTimeout 是异步的，不会等到回调函数执行完毕才继续往下执行。

* 在 functionTwo 中，它调用了 functionOne ，但是由于 functionOne 返回的是 undefined ，所以if语句中的判断条件为false，不会执行 console.log("ok!!!") 语句。

* 如果您想要在 functionTwo 中输出"ok!!!"，可以将 functionOne 修改为返回一个Promise对象，以便在 functionTwo 中等待它的执行结果。

**/

// functionTwo();

// function functionOne() {
// console.log("wait...");
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve(true);
// }, 1000);
// });
// };

/**
* 现在 functionOne 返回的是一个Promise对象，可以通过 await 关键字等待它的执行结果。

* functionTwo 也需要被标记为 async 函数，才可以使用 await 关键字。

* 运行这段代码将会输出 wait... 和 ok!!! ，因为 await 会等待 functionOne 异步操作的完成，并将其异步操作的结果返回给if语句进行判断。

**/

// async function functionTwo() {
// if (await functionOne()) {
// console.log("ok!!!");
// };
// };

// ---------------------------------- 分割线 -------------------------------------------

// 答案二回调函数方法解决

/**
* 在这个代码中，我们修改了 functionOne 函数，加入了一个回调函数参数。

* 在 setTimeout 函数执行成功后，调用回调函数来通知外部代码，这里是调用 functionTwo 函数。

* 在 functionTwo 函数内部，我们将输出 ok!!! 的代码放到了回调函数中，当 functionOne 函数执行成功后，回调函数被调用，从而实现了在输出 wait... 后输出 ok!!!

// functionTwo();

// function functionOne(callback) {
// console.log("wait...");
// setTimeout(() => {
// callback(true);
// }, 1000);
// };

// function functionTwo() {
// functionOne((result) => {
// if (result) {
// console.log("ok!!!");
// }
// });
// };