Javascript Date Format Patch 0.9.11

I’ve been combing trough my github “portfolio”, and noticed a fork in my Javascript Date Format Patch project, poked around to see what’s been modified, and found out that the minified version did not work properly… I didn’t test it, but I did notice that I needed to fix some “minor” issues (missing braces, semicolons, etc., embarrassing, I know).

Not to my defense, but, I didn’t use JSLint to verify the code because I just absolutely hate don’t like it, and I consider it to be more trouble than use, due to it’s lack of (or hard to do) configuration options. On that topic, in the diff of the commit, I discovered that the forker used a tool called JSHint to verify the code. Remembering all of the good features of JSLint, and the ability to configure out some of the annoying options in this fork, I immediately loved it…

Enough about these two… Javascript Date Format Patch is now updated, nothing functional, nothing drastic, but now it should definitely work minified… Thanks Paul… I’ve even skipped a version (by the way, its 0.9.11) due to the null vs undefined issues with Javascript, but more on that in some future post…

For more information on how to use this javascript date formatting and parsing patch, visit the old Javascript Date Formatter post.

For loop with a delay in JavaScript

I recently had a need to run a simple for loop in JavaScript, but with a delay (or a pause, or sleep…) of few milliseconds in between iterations. It’s not as simple as I thought, but it can be done, with plane old JavaScript. This is that simple for loop I was talking about:

var words = ['Hello', ', ', 'I ', 'am ', 'in ', 'a ', 'loop', '...'];
for(var i in words)
{
    document.getElementById('output').innerHTML += words[i];
    sleep(1000);
}

Simple, yes, but it doesn’t work, however you can make something similar to have this functionality, but it won’t be a loop, and it won’t look this simple, but at least it’s possible.

var words = ['Hello', ', ', 'I ', 'am ', 'in ', 'a ', 'loop', '...'];

// (1) define the variable for the array index
var i = 0;

// (2) define the delayed loop function
function delayedLoop()
{
    // (3) do action
    document.getElementById('output').innerHTML += words[i];

    // (4) if the end of the array has been reached, stop
    if(++i == words.length)
    {
        return;
    }

    // (5) recursively call the delayed loop function with a delay
    window.setTimeout(delayedLoop, 1000);
}
delayedLoop(); // (6) start the loop

What is this example doing:

  1. define the variable for the array index
  2. define the function which will pose for the loop
  3. that function does the same action as in the loop in the first example
  4. make a check if the loop should end
  5. uses the window.setTimeout(function, delay) to recursively start that function again, but with a 1000 ms delay
  6. everything above only defined the delayedLoop funcion, so you need to call it to do anything

Working example below:

Start…

Output area…