Use javascript delay with document.write

Question

Can someone help me to input a javascript delay to this code. I want to make this code to open after 2 sec. when you open the url. Rest of the site load normaly.

<script type="text/javascript">

var avail=$z:value[article.availableinstock];

if ($z:value[article.availableinstock] < 1)
{
document.write('<div class="shop_not">');
document.write("In order!");
}
else if ($z:value[article.availableinstock] >=100)
{
document.write('<div class="shop_ok">');
document.write(" 100+ in stock" );
}
else if ($z:value[article.availableinstock] >=50 )
{
document.write('<div class="shop_ok">');
document.write(" 50+ in stock" );
}
else if ($z:value[article.availableinstock] >=25 )
{
document.write('<div class="shop_ok">');
document.write(" 25+ in stock" );
}
else
{
document.write('<div class="shop_bob">');
document.write(+ avail.toFixed(0));
document.write(" in stock" );
}
</script>

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — KooiInc, Oct 12 '12 at 09:38
The reason to use ex. 2 sec is that the articlelist is so slow when i use the script, even only the value. — Frank, Oct 12 '12 at 10:08
So it would be better to make the articlelist *fast* than adding 2 sec delay (what every user will notice)? Or putting the javascript in a *callback* of the articlelist instead of hoping everything is done within two sec? — Dominik Schreiber, Oct 12 '12 at 10:13
i see your point Dominik! The page is fast "enough", but it is this script that makes it slow, because the article.available query required so much. So my plan was that after the page was loaded then this script will load. — Frank, Oct 12 '12 at 10:27
But couldn't you optimize your script to make it faster? (i.e. use your `avail`-variable in the `if`-conditions instead of querying 5 times). Other point: if you use jQuery (or something similar) you could use the `.ready()` handler to call your script after the rest is done. — Dominik Schreiber, Oct 12 '12 at 10:43

score 1 · Answer 1 · answered Oct 12 '12 at 09:33

The solution is to put everything in a setTimeout(function() {... your stuff ...}, 2000) call.

This should look like:

function yourStuff() {
  var avail=$z:value[article.availableinstock];

  if ($z:value[article.availableinstock] < 1) {
    document.write('<div class="shop_not">');
    document.write("In order!");
  } else if ($z:value[article.availableinstock] >=100) {
    document.write('<div class="shop_ok">');
    document.write(" 100+ in stock" );
  } else if ($z:value[article.availableinstock] >=50 ) {
    document.write('<div class="shop_ok">');
    document.write(" 50+ in stock" );
  } else if ($z:value[article.availableinstock] >=25 ) {
    document.write('<div class="shop_ok">');
    document.write(" 25+ in stock" );
  } else {
    document.write('<div class="shop_bob">');
    document.write(+ avail.toFixed(0));
    document.write(" in stock" );
  }
}

Then, somewhere inside your page body you simply call

<script type="text/javascript">setTimeout(yourStuff, 2000);</script>

Riz · Answer 2 · 2012-10-12T09:41:06.680

Enclose you code in a function and use setTimeout JS function.

function function_name () {
    var avail=$z:value[article.availableinstock];

    if ($z:value[article.availableinstock] < 1)
    {
        document.write('<div class="shop_not">');
        document.write("In order!");
    }
    else if ($z:value[article.availableinstock] >=100)
    {
        document.write('<div class="shop_ok">');
        document.write(" 100+ in stock" );
    }
    else if ($z:value[article.availableinstock] >=50 )
    {
        document.write('<div class="shop_ok">');
        document.write(" 50+ in stock" );
    }
    else if ($z:value[article.availableinstock] >=25 )
    {
        document.write('<div class="shop_ok">');
        document.write(" 25+ in stock" );
    }
    else
    {
        document.write('<div class="shop_bob">');
        document.write(+ avail.toFixed(0));
        document.write(" in stock" );
    }
}

setTimeout('function_name()', 2000);

Use javascript delay with document.write

2 Answers2