As we all know, setTimeout is generally used for delay processing, but when the user’s network speed is slower than the delay set by setTimeout, it will cause a series of unpredictable bugs…

For example, the current page routing stack is A -> B. After A series of operations on page B, page A will be returned, and page A’s UI will be displayed according to the operation results on page B. For example, page B has two buttons. Clicking on both of them will return to page A, but clicking on the first button will bring up A Dialog box, while clicking on the second button will not.

What do you do with this requirement?

Use EventBus

The first thing that comes to mind is to use EventBus and send an event notification (A) after router.back() when clicking the first button, and then listen for the event on page A until the Dialog pops up.

For simplicity let’s print a log to see the effect:

Function goBack1() {router.back() console.log("page B back"); // function goBack1() {router.back() console.log("page B back"); $bus.emit("showDialog", {}); $bus.on("showDialog", () => {console.log(" received showDialog"); }); onMounted(() => { console.log("page A onMounted"); });Copy the code

Router. Back () is asynchronous, so page B back is printed before Page A onMounted.

page B back
page A onMounted
Copy the code

Because the event has already been emitted before page A listens for it, there is no chance to consume it.

If router.back() is asynchronous, you would be wise to say “await” before it. Let’s take a look at the definition of back:

The back() method does not return a Promise, as push and replace do, so it is useless even to prefix ‘await’ with the same result as above.

EventBus + setTimeout

If you can’t send eventBus immediately after back(), add a delay to the eventBus.

function goBack1() { router.back(); console.log("page B back"); setTimeout(() => { $bus.emit("showDialog", {}); }}, 200)Copy the code

The delay is 200 milliseconds, so in 200 milliseconds the page must have finished loading, look at the log

Page B Back Page A onMounted The showDialog event is receivedCopy the code

Sure enough, successfully completed this demand, happy to come off work.

Two days later, your testing colleague mentions A bug that does not pop up when you return from page B to page A. If you don’t believe it, try it yourself on the page. No problem!

After a battle test, he did not pop up. Your little brain is racing. What’s the problem? The same code, why different people run the effect is not consistent, is it a character problem……

Suddenly, the only variable is the speed of the Internet!

If the logic of page A is very complex and A lot of resources need to be loaded, the initialization can certainly be completed within 200mm if the network speed is generally fast. However, if the user’s network speed is very slow in 3G era, the initialization of the page may not be completed in 200ms, and eventBus will be sent before listening. The result of not listening in.

What about increased latency? In fact, it is not a matter of time, because we do not know how slow the user’s network is, even if it is set to 5 seconds, it is not absolutely safe, and too long will affect the user experience. So this method is not desirable, there are too many uncertainties.

3. Optimal solution

Some people say that you can use vuex to record A variable in vuex when you return from the first button at point B, and page A reads this variable to determine what logic to show. That’s not a safe way to do it. When does the variable reset? There will always be extremes to circumvent the reset condition you set. Maintaining intermediate states is error-prone and costly.

What about using page A as A route cache? First, business scenarios require no caching, and second, they do not address the need for different ways to return and handle different logic.

The safest way is not to use back(), but replace() and put parameters on the URL. Page A reads the parameters on the URL and makes different actions according to different states. One state corresponds to A certain action.