Javascript setTimeOut problem



  •  Hi,

     

    Help!!

     

    I'm not what I would describe as a newbie but I, for the likes of me, can't seem to understand why this doesn't work:

     

    function buildZebraTable(tableId)
        {
        var table=document.getElementById(tableId);
        if(!table){return};
        var rows=document.getElementsByTagName('tr');
        for(var i=0;i<rows.length;i++)
            {
            window.setTimeOut(changeRowBanding(rows,i), 1000);
            }
        }

    function changeRowBanding(i)
    {
        var rows=document.getElementsByTagName('tr');
        rows[i].className=!evenFlag?'oddrow':'evenrow';
        evenFlag=!evenFlag;    
    }

     

    What I want it to do is just visually update the onscreen table row by row every second - some basic visual effect.

     

    It works fine when it's not set in a setTimeOut, but once it is, I get a setTimeOut is not a 

     

    Any ideas?  Thanks



  • You've made a multitude of beginner's mistakes here, more than a simple syntax mistake:

    1. the function's name is setTimeout(), not setTimeOut() 
    2. the first argument must be a function object, and you cannot pass any arguments. In your code, you're passing the return value of changeRowBanding, which is undefined, as it does not return anything.
    3. the for loop will execute as fast as possible, resulting in [row.length] threads being started with an (as explained in #2) undefined function, all of which will execute at the same time after 1 second.

    Example code for what is essentially a finite-length timed for-loop is as follows:

       window.onload = writeDelay;


    function writeDelay() {
    var sourceArray = new Array(
    'One',
    'Two',
    'Three',
    'Four',
    'Five'
    );

    //begin loop
    var i = 0;
    var loopTimer = setInterval(function () {
    if (i == sourceArray.length) {
    clearInterval(loopTimer);
    return;
    }
    /////

    document.getElementById('foobar').innerHTML += sourceArray[i] + '<br />';

    /////
    i++;
    }, 1000);
    //end loop
    }

    Paste that into a script tag in the head, and fiddle with it.

    An important thing to note is that all the code within the loop is directed to a new thread, so code that appears after "//end loop" will execute immediately, rather than after the loop finishes. This is how setInterval and setTimeout work, and there's no getting around it short of putting that final code in a separate function and manually calling it after the timing stuff has fnished.



  •  Thank you!

     

    I guess I'm more newbie than I thought

     

    <<hangs head on shame>>



  • 'Welcome.

    Beware the moment you think you don't need to learn anything more. You are wrong. :)



  • Also, consider simply using a javascript library.

    For instance, your code in Jquery.

    [code]$("tr:nth-child(odd)").addClass("oddrow");
    $("tr:nth-child(even)").addClass("evenrow");[/code]

     


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.