js functions should be sync, but act async... Why?

Question

I'm having problems with this JS functions:

    function unfade(element, callback) {
    var op = 0.1;  // initial opacity
    element.style.filter = 'alpha(opacity=0)';
    element.style.opacity = 0;
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}

function fade(element, callback) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 10);
}

function fadeAndUnfade(element2fade, element2unfade) {
    fade(element2fade);
    unfade(element2unfade);
}

If I call the function fadeAndUnfade(...) then it should run fade(...) and once it's done it should run unfade(...). But both of this functions run at the same time.

Could someone please explain me why? I don't see any reason why they sould run async...

Thank you very much :)

EDIT:

As mentioned from Robin Zigmond, setInterval is an async function: I tried

...
var timer = await setInterval(...

but it gave me in Firefox debug this error: Uncaught SyntaxError: await is only valid in async functions, async generators and modules

How can i make this functions then not async?

both use setInterval which is one of the fundamental async API's in Javascript. — Robin Zigmond
– Robin Zigmond, Commented Apr 3, 2022 at 15:21
From your description it sounds like you actually want setTimeout (run once, after a delay) rather than setInterval (run repeatedly with the given time interval in between). And to do only have unfade run after the fade (including timeout) has completed, the easiest way is probably to convert them into promises and then you can use async/await, or .then(...) — Robin Zigmond
– Robin Zigmond, Commented Apr 3, 2022 at 15:23
"I tried var timer = await setInterval(..." - see using await with setTimeout. Notice that you cannot use setInterval with promises - but you can simply write a loop instead (like in this example). — Bergi
– Bergi, Commented Apr 3, 2022 at 15:44
What is the use of callback parameter in your function definition? It's never used in your code. — Udochukwu Enwerem
– Udochukwu Enwerem, Commented Apr 3, 2022 at 16:36

Udochukwu Enwerem · Accepted Answer · 2022-04-03 16:54:59Z

setInterval() and setTimeout() are asynchronous but do not return promises. Using them isn't equivalent to using the async APIs (Promises, then, async, await, etc.). Their usage is more accurately described as "scheduling a function call" i.e., passing a funtion reference to a scheduler to execute that function after a certain time in the future; once (setTimeout()) or repeatedly (setInterval()).

At the point in your code where you call setInterval() nothing happens other than your anonymous function being scheduled to execute at some time in the future.

So if you want unfade() to happen after fade() nest them this way

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.filter = 'alpha(opacity=0)';
    element.style.opacity = 0;
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}

function fade(element, element2) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
            unfade(element2);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 10);
}

function fadeAndUnfade(element2fade, element2unfade) {
    fade(element2fade, element2unfade);
}

Collectives™ on Stack Overflow

js functions should be sync, but act async... Why?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related