@Jim Park
Whoa! Thought I could solve this simple puzzle in a few minutes.
Timers are tricky, and it took me way longer than expected … but I got there. LMAO.
There is a logic problem with your code - take a look at this pseudo code:
if ($w("#textbox").text === string1) {
// hide
$w("#textbox").text = string2;
// show
} else if ($w("#textbox").text === string2) { // this will always be the case ... you just changed it above
// hide
$w("#textbox").text = string1;
// show
}
So you’d always execute both conditions instead of one or the other.
That aside, the more interesting part:
Your code failed because you’re commanding three commands - that take about 1 second to complete - in a handful of milliseconds, and so only the first command gets executed properly (hide/fade):
$w("#textbox").hide("fade", { duration: 500 });
$w("#textbox").text = string1;
$w("#textbox").show("fade", { duration: 500 });
You are expecting synchronous execution of your commands.
So you’re expecting for JS to “hide” the textbox and only when such “fade” is completed 500 ms later, you expect JS to continue to the next line and only then change the textbox, and when that is completed, only then to move to the third line and do a show/fade of the textbox.
Instead, what is really happening is asynchronous execution:
You’re calling the hide/fade functions which are promises … they start executing in the background while JS instantly moves to the next line to change the textbox content (creating another promise) and then JS instantly moves to the next line to request show/fade functions (yes, more promises). The show/fade promise cannot execute properly because JS is still busy doing the 500 ms hide/fade function.
So you have the correct synchronous logic for these steps, but for proper JS code to execute the way you intent to, you must do something different - handle the promises properly (as @J.D. suggests with .then) or use setTimeout and a function for each intended step. Like you, I prefer synchronous execution of the main function, so I rolled with “await” and setTimeout (didn’t need await afterall).
You can write those three steps into separate functions:
hide/fade … function hideTextBox () (in my example)
change text … function change1 () and change2() (one for each case - Hi/Hello)
show/fade … function showTextBox ()
Then you can control execution times of these three functions with the native JS comand “setTimeout.”
I left the console logs in there - if you increase the timing, you can see in slow motion how the sync code executes and how the results of the asynchronous promises roll in while the changeText() function executes the whole thing almost instantly.
Hope it helps. If it does - you’re welcome.
const string1 = "Hi";
const string2 = "Hello";
var counter = 0;
$w.onReady(() => {
setInterval(changeText, 5000);
})
async function changeText () {
counter ++;
console.log( "[ " + counter + " ] " + "===================================================================================================");
console.log("counter % 2 = " + (counter % 2) );
hideTextBox(); // takes 500 ms to complete
if ( counter % 2 ) { // "counter modulo 2"? => "1" or "true" means odd number
console.log("Mod case 1: Hi => fade and change to Hello ");
console.log("Request delayed changing to Hello");
setTimeout(change1, 800); // wait for 500 ms fade to finish before you execute textbox change
}
if ( counter % 2 === 0) { // "counter modulo 2"? "0" means even number
console.log("Mod case 0: Hello => fade and change to Hi ");
console.log("Request delayed changing to Hi");
setTimeout(change2, 800); // wait for 500 msfade to finish before you execute textbox change
}
console.log("Now request showing of changed textbox")
setTimeout( showTextBox, 1000); // wait for fade to finish before you execute textbox show
}
function hideTextBox () {
console.log("...fading out ...")
$w("#textbox").hide("fade", { duration: 500 });
}
function showTextBox () {
console.log("...fading in ...")
$w("#textbox").show("fade", { duration: 500 });
console.log( "================================================ complete =====================================");
console.log(" ");
}
function change1 () {
console.log("...changing to Hello ...")
$w("#textbox").text = string2;
}
function change2 () {
console.log("...changing to Hi ...")
$w("#textbox").text = string1;
}