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, Apr 03 '22 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, Apr 03 '22 at 15:23
"*I tried `var timer = await setInterval(...`*" - see [using `await` with `setTimeout`](https://stackoverflow.com/q/33289726/1048572). Notice that you cannot use `setInterval` with promises - but you can simply write a loop instead (like in [this example](https://stackoverflow.com/q/54928912/1048572)). — Bergi, Apr 03 '22 at 15:44
What is the use of *callback* parameter in your function definition? It's never used in your code. — Udo E., Apr 03 '22 at 16:36

Udo E. · Answer 1 · 2022-04-03T16:54:59.667

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);
}

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

1 Answers1