异步功能完成后，如何开始执行功能？ 在这种情况下，诺言不起作用

Question

I would like to perform two function simultaneously. But one of them is using the value from the second one(async function) in callback.

const asyncFunction = '' // it is fetch function and i need this function 
 // to complete before send() function perform
const send ='' // it sends information from asyncFunction , so it has to 
//  be perform after asyncFunction is completed
asyncFunction()
document.querySelector('.js-btn').addEventListener('click', send()) 
// I would like to listen immediately when page is load, and send an 
// information when asyncFunction is complete

Using promises i can listen for click only when asyncFunction is completed, so if user click a btn before asyncFunction is complete it doesn't perform an event

What i would like to do is to listen for an action immediately when page is load, but send() function has to wait until asyncFunction is completed and then perform.

Please help me:)

Answer 1

Possible solutions:

1. disable the body and show "please wait" until the asyncFunc is done.

2. make the body invisible until the asyncFunc is done.

3. disable the send button until the asyncFunc is done.

4. add an anonymous function to the send button. Remove that function on click and start checking every 10ms if the async has finished and then then performs the send()

5. add two bools. let asyncFuncFinished = false; let sendFinished = false; now you cann add to asyncFunc and send if (asyncFuncFinished && sendFinished) send();

Answer 2

In this scenario your send function have to wait till asyncFunction be done. So the click event should be set after asyncFunction is done. It doesn't make sense when you don't have the result of asyncFunction set a click event.

You can set a click event on page load to show the user a 'Please wait...' message (or whatever), and in callback of asyncFunction (or use promises) remove that click event and set another one to fire send function.