|||

Fade In setTimeout Function in JS

Ever since jumping back into mathematics by way of homeschooling, as well as reading about it, I was inspired to work on a complex problem. I searched for something to solve that I would really enjoy and I ended up going back to JavaScript. I haven’t written JS in a while. I decided to search some old JS programs in my JSFiddle account and found one I could work on.

This is the program I started with. I want to clean it up. More specifically, I want to simplify the syntax further by consolidating it. I don’t like how each function repeats.

setTimeout(function () {
  document.getElementById("one").className = "";
}, 1000);

setTimeout(function () {
  document.getElementById("two").className = "";
}, 2000);

setTimeout(function () {
  document.getElementById("three").className = "";
}, 3000);

I wasn’t understanding why className = "" was there. I thought I could get rid of it, but when I did, the program didn’t work. So I learned how it works thanks to this post from StackOverflow:

The empty string (current.className = "") is simply a way of removing all CSS classes from the element. So, if the user clicks an element that already has a CSS class (e.g. class="saturate"), that class will be removed, thereby removing the effect.

It’s because className = "" is replacing the current hidden” class, therefore, making the elements visible again. Once they’re visible, the code is allowed to do its thing.

Here’s my second attempt. I took advantage of constants, which is a good practice. Although I still want to clean up the syntax further.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

setTimeout(function () {
  x.className = "";
}, 1000);

setTimeout(function () {
  y.className = "";
}, 2000);

setTimeout(function () {
  z.className = "";
}, 3000);

The following works, but I still don’t like having to write setTimeout(function()) so many times. This is not the right approach.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

setTimeout(function () {
  setTimeout(function () {
    z.className = ""; //runs second after 1100ms
  }, 2000);

  setTimeout(function () {
    y.className = "";
  }, 1000);

  x.className = ""; //runs first, after 1000ms
}, 1000);

Here’s another attempt (I got the idea from this answer on Stackoverflow). I like this one much better, because I apply constants and variables. Although I’m still wondering if there’s a better way to write this.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

var t1 = setTimeout(function () {x.className = "";}, 1000);
var t2 = setTimeout(function () {y.className = "";}, 2000);
var t3 = setTimeout(function () {z.className = "";}, 3000);

setTimeout(t1, t2, t3);

Here’s the end product on CodePen:.

Up next Slowing Down GOD has been working on slowing me down. I spent most of my life, moving at the speed of the world. The main driver for this was work. My day job.
Latest posts Fade In setTimeout Function in JS Slowing Down Withholding Truth Design Approach Why I’m Tired Of The Rat Race Done Hustlin’ Testimony: GOD Revealed HIMSELF To Me My First Typeface Don’t Worship The Bible A Poem For My HEAVENLY FATHER CSS Center Vertically & Horizontally Welcome Git: Create New Branch, Checkout, & Merge Reading