setTimeOut

Discussion in 'Javascript' started by Frances Del Rio, Sep 24, 2004.

  1. this code is supposed to flip imgs at intervals of one second, but it
    flipps them much faster, it seems it flips them all in that first
    second, the more seconds the faster it flips them, instead of the other
    way around... (I mean it seems to me the more seconds I put in there the
    more seconds should go by betw. flips... each photo is in a div, each
    div has a z-index of 0, 1, 2, etc..)

    http://www.francesdelrio.com/cassini
    (pls reload a few times, my stuff loads a bit slow b/c my site is hosted
    abroad, their int'l traffic is slower..)

    code:

    var photos = new
    Array("one","two","three","four","five","six","seven","eight")
    function flip() {
    for (i=1; i < photos.length; i++) {
    var photoDiv = eval('document.getElementById(' + "photos" + ')')
    var doIt = photoDiv.style.visibility = "visible"
    setTimeout("doIt",1000)
    }
    }

    thank you.. Frances
     
    Frances Del Rio, Sep 24, 2004
    #1
    1. Advertising

  2. Frances Del Rio

    J. J. Cale Guest

    "Frances Del Rio" <> wrote in message
    news:...
    >
    > this code is supposed to flip imgs at intervals of one second, but it
    > flipps them much faster, it seems it flips them all in that first
    > second, the more seconds the faster it flips them, instead of the other
    > way around... (I mean it seems to me the more seconds I put in there the
    > more seconds should go by betw. flips... each photo is in a div, each
    > div has a z-index of 0, 1, 2, etc..)
    >
    > http://www.francesdelrio.com/cassini
    > (pls reload a few times, my stuff loads a bit slow b/c my site is hosted
    > abroad, their int'l traffic is slower..)
    >
    > code:
    >
    > var photos = new
    > Array("one","two","three","four","five","six","seven","eight")
    > function flip() {
    > for (i=1; i < photos.length; i++) {

    will not reference the first array element
    > var photoDiv = eval('document.getElementById(' + "photos" + ')')

    eval is unnecessary and in general shouldn't be used to return object
    references as such
    var photoDiv = document.getElementById(photos);
    > var doIt = photoDiv.style.visibility = "visible"

    doIt always = "visible"
    > setTimeout("doIt",1000)

    first parameter wants a function reference or a valid expression. Further
    the timeout won't work the way I think you intend since the loop doesn't
    stoop for 1 second when you call setTimeout. It just keeps falling through
    the loop and all your images will be shown at once. If Dr J is listening he
    is an expert on this type of thing but you better explain what you're trying
    to do. e.g. turn images on/off at intervals; turn cards in a series at one
    second intervals.
    > }
    > }

    depending on what you're doing, the use of the array and the Ids is
    unnecessary. You could wrap them in a div with id="wrapper" and loop through
    them using wrapper.children(i) to reference each object. I assume from your
    code that you have each image in a separate div. This is not always a good
    idea again depending on what you're trying to achieve. If it's positioning
    you can achieve the same or better results just using the image tags or
    <p><img ... or <span><img
    Hope this helps. Jimbo
    >
    > thank you.. Frances
    >
     
    J. J. Cale, Sep 24, 2004
    #2
    1. Advertising

  3. J. J. Cale wrote:
    > "Frances Del Rio" <> wrote in message
    > news:...
    >
    >>this code is supposed to flip imgs at intervals of one second, but it
    >>flipps them much faster, it seems it flips them all in that first
    >>second, the more seconds the faster it flips them, instead of the other
    >>way around... (I mean it seems to me the more seconds I put in there the
    >>more seconds should go by betw. flips... each photo is in a div, each
    >>div has a z-index of 0, 1, 2, etc..)
    >>
    >>http://www.francesdelrio.com/cassini
    >>(pls reload a few times, my stuff loads a bit slow b/c my site is hosted
    >>abroad, their int'l traffic is slower..)
    >>
    >>code:
    >>
    >> var photos = new
    >>Array("one","two","three","four","five","six","seven","eight")
    >> function flip() {
    >> for (i=1; i < photos.length; i++) {

    >
    > will not reference the first array element
    >
    >> var photoDiv = eval('document.getElementById(' + "photos" + ')')

    >
    > eval is unnecessary and in general shouldn't be used to return object
    > references as such
    > var photoDiv = document.getElementById(photos);
    >
    >> var doIt = photoDiv.style.visibility = "visible"

    >
    > doIt always = "visible"
    >
    >>setTimeout("doIt",1000)

    >
    > first parameter wants a function reference or a valid expression. Further
    > the timeout won't work the way I think you intend since the loop doesn't
    > stoop for 1 second when you call setTimeout. It just keeps falling through
    > the loop and all your images will be shown at once. If Dr J is listening he
    > is an expert on this type of thing but you better explain what you're trying
    > to do. e.g. turn images on/off at intervals; turn cards in a series at one
    > second intervals.
    >
    >> }
    >> }

    >
    > depending on what you're doing,


    thank you very much for yr help.. this is simply a learning exercise...
    (need to learn how to implement my own loops from scratch..) I simply
    want imgs to flip every 2 seconds or so for ever, that's it.... I
    implemented yr code (but don't understand 'doIt always = "visible"',
    wasn't sure about that line, left it out..) now cycle goes thru once
    then stops.... I want it to start over when it finishes, like a slide
    show that reaches the end then starts again... I know I need to call
    function again once it's done, but not sure how.. called function again
    right outside loop (inside function) but still went thru loop only
    once.. (and then get an "out of memory" error, had never seen this..)

    now am trying same w/rollovers instead of hide/show divs...

    var photos = new
    Array("one","two","three","four","five","six","seven","eight")
    function flip() {
    for (i=1; i < photos.length; i++) {
    var doIt = "cassini.src = 'images/" + photos + ".jpg'"
    // one.jpg, two.jpg, three.jpg, etc..
    setTimeout("doIt",i*1000)
    }
    }

    here I get NOTHING.... (I see a flicker.. like imgs flip really fast or
    something..) I understand very well the concept of loops, what I have a
    hard time with usu. is organizing stmts inside the loop... again, thank
    you very much for yr help.. Frances
     
    Frances Del Rio, Sep 25, 2004
    #3
  4. On Fri, 24 Sep 2004 23:20:50 -0400, Frances Del Rio <>
    wrote:

    [snip]

    > thank you very much for yr help..

    ^^

    Please don't use abbreviations like that. Saving two keystrokes is hardly
    worth the loss of readability.

    [snip]

    > I implemented yr code (but don't understand
    > 'doIt always = "visible"', wasn't sure about that line, left it
    > out..)


    He was saying that in your code, 'doIt' always equalled 'visible'. The
    statement in question was:

    var doIt = photoDiv.style.visibility = "visible"

    First, the visibility property of the photoDiv style object is assigned
    'visible'. Next, doIt is assigned the value of the visibility property.
    Considering that you want doIt to be a function reference for it to be of
    any real use with setTimeout, the statement above is not what want.

    [snip]

    > called function again right outside loop (inside function) but still
    > went thru loop only once.. (and then get an "out of memory"
    > error, had never seen this..)


    That would be a stack overflow and a pattern called recursion. Recursion -
    calling a function from within that function - can be a useful thing. For
    example, nested data, such as that found in the document tree, can be
    examined by calling a function recursively, passing in a different branch
    on each invocation. However, recursive calls take up memory as the system
    needs to remember the state of earlier function calls. This state is
    stored on the stack (in most languages on the PC). If you don't set a
    condition whereby recursion stops, it will keep going until you run out of
    memory.

    > now am trying same w/rollovers instead of hide/show divs...
    >
    > var photos = new
    > Array("one","two","three","four","five","six","seven","eight")


    Define arrays with literals:

    var photos = ['one', 'two', 'three', 'four', 'five', 'six',
    'seven', 'eight'];

    > function flip() {
    > for (i=1; i < photos.length; i++) {


    This will cause the first image to be skipped. Arrays are zero-order (they
    start at index zero). Also, be sure to declare that variable, i, with the
    var keyword. If you don't it will become global.

    for (var i = 0; i < photos.length; i++) {

    This isn't a fix; just a tip.

    > var doIt = "cassini.src = 'images/" + photos + ".jpg'"
    > // one.jpg, two.jpg, three.jpg, etc..
    > setTimeout("doIt",i*1000)
    > }
    > }
    >
    > here I get NOTHING.... (I see a flicker.. like imgs flip really fast or
    > something..) I understand very well the concept of loops, what I have a
    > hard time with usu. is organizing stmts inside the loop... again, thank
    > you very much for yr help.. Frances


    The flow of that function has become quite confused. When the function is
    called, a loop is encountered with no code to halt it. That immediately
    implies that the entire set of images will be processed. That's why you
    saw all of the images flash into view with previous versions. All that
    happens here is string concatenation (and assignment), and a call to
    setTimeout that will do nothing useful.

    var j = 0,
    photos = ['one', 'two', 'three', 'four', 'five', 'six',
    'seven', 'eight'];

    function flip() {
    document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
    j = (j + 1) % photos.length;
    }
    // Call onload:
    setInterval(flip, 1000);

    This is a simple version of what you want to achieve. setInterval will
    call flip approximately every second. When it does, the first statement
    will change the source of the IMG element, cassini, and increment the
    index variable, j. The modulus (%) ensures that the value of j stays
    within the range 0 <= j < 8.

    However, this code pollutes the global namespace. It also looks-up a
    reference to the IMG, cassini, and the length property of the photos array
    on every invocation of flip.

    window.onload = function() {
    var i = document.images['cassini'],
    j = 0,
    p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    'eight'],
    n = p.length;

    function flip() {
    i.src = 'images/' + p[j] + '.jpg';
    j = (j + 1) % n;
    }
    flip.toString = function() {return 'flip()';};

    setInterval(flip, 1000);
    };

    That's quite a transformation.

    The first thing to note is the external function expression, function()
    { ... }. You can think of this just like any other function, except it
    doesn't have a name. What this does is produce a new scope level. As with
    all functions, the local variables declared here aren't accessible outside
    of the function. This means you can name variables, that would normally be
    global, anything you like and not worry about them clashing with other
    variables.

    Inside the function, things are much like they were last time, with two
    slight differences:

    1) A reference to the IMG element, cassini, has been assigned to the
    variable, i. This allows it to be looked-up once only, rather than
    repeatedly.
    2) Similarly, the length property of the array of filenames has been
    stored in n. Like the reference to cassini, it doesn't change, so why keep
    looking it up?

    There's a third difference, which follows after the declaration of flip.
    All functions and objects have a method called toString. Whenever a string
    value is required, and an object or function is given, this method is
    called and string that represents that object is returned[1]. The
    setInterval function, like setTimeout, can accept two types as its first
    argument. A function reference, and a string. Older browsers only accept a
    string. Giving the function, flip, a toString method means that browsers
    can convert the argument to a form they can use. This is explained in the
    FAQ notes:

    <URL:http://www.jibbering.com/faq/faq_notes/misc.html#mtSetTI>

    I should also briefly explain the mechanism, as a whole, that allows this
    to work. When a function has returned, local variables are usually
    destroyed. However, this doesn't happen with the outer function above. The
    reason is the position of the inner function, flip. flip references the
    local variables of the outer function, so they remain in memory; flip
    forms a closure. Closures have many applications, too numerous to list
    here. A detailed explanation of them is also present in the FAQ notes:

    <URL:http://www.jibbering.com/faq/faq_notes/closures.html>

    I hope that was understandable, or at least gives you the functionality
    that you want. If you need to execute other things when the document loads
    (the code above will overwrite it), change the first line of my code from

    window.onload = function() {

    to

    function functionName() {

    giving the function any name you want. You can then place the function
    amongst your other onload code.

    Good luck,
    Mike


    [1] The actual value can vary, depending on the implementation and the
    type of object.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 25, 2004
    #4
  5. Michael Winter wrote:

    > window.onload = function() {
    > var i = document.images['cassini'],
    > j = 0,
    > p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    > 'eight'],
    > n = p.length;
    >
    > function flip() {
    > i.src = 'images/' + p[j] + '.jpg';
    > j = (j + 1) % n;
    > }
    > flip.toString = function() {return 'flip()';};
    >
    > setInterval(flip, 1000);
    > };
    >
    > That's quite a transformation.


    ....and a better one as well, but with a slight mistake; the flip
    function should be global if you want the toString fallback to be
    executable (string argument for the setInterval methods are evaluated in
    a global context).

    Therefore what about replacing
    function flip() {
    by
    flip = function() {
    ?


    Regards,
    Yep.
     
    Yann-Erwan Perio, Sep 25, 2004
    #5
  6. Yann-Erwan Perio wrote:

    > Michael Winter wrote:


    > Therefore what about replacing
    > function flip() {
    > by
    > flip = function() {
    > ?


    Nah, forget it, that wouldn't work - there no way to add the fallback if
    using closures.
     
    Yann-Erwan Perio, Sep 25, 2004
    #6
  7. On Sat, 25 Sep 2004 11:13:45 +0200, Yann-Erwan Perio
    <> wrote:

    [snip]

    > Nah, forget it, that wouldn't work


    *slaps head*

    No, of course not. Stupid mistake on my part.

    > there no way to add the fallback if using closures.


    By exposing the function, it is possible:

    function initFlip() {
    var i = document.images['cassini'],
    j = 0,
    p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    'eight'],
    n = p.length;

    function flip() {
    i.src = 'images/' + p[j] + '.jpg';
    j = (j + 1) % n;
    }
    flip.toString = function() {return 'initFlip.flip()';};

    initFlip.flip = flip;

    setInterval(flip, 1000);
    };
    window.onload = initFlip;

    It seems hack-ish, though. But it does work.

    Thanks for pointing that out,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 25, 2004
    #7
  8. Michael Winter wrote:

    >> Nah, forget it, that wouldn't work

    >
    > *slaps head*


    That looked painful:)

    >> there no way to add the fallback if using closures.

    >
    > By exposing the function, it is possible:


    Sorry, I meant using the closure in the original construct, not with
    closures in general (with which alsmost everything is possible) - using
    an outer function, as you've just proposed, is indeed the best way,
    since you can still take advantage of the flip closure in normal mode.

    > It seems hack-ish, though. But it does work.


    No no no, it's not hackish, that's just how javascript can be written,
    and most of the time, should be written (IMHO).


    Cheers,
    Yep.
     
    Yann-Erwan Perio, Sep 25, 2004
    #8
  9. On Sat, 25 Sep 2004 12:15:50 +0200, Yann-Erwan Perio
    <> wrote:

    [snip]

    > Sorry, I meant using the closure in the original construct [...]


    I know, but the OP might have been confused and may not have worked out
    how to reach a solution.

    >> It seems hack-ish, though. But it does work.

    >
    > No no no, it's not hackish, that's just how javascript can be written,
    > and most of the time, should be written (IMHO).


    The original just seemed cleaner. Self-contained.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 25, 2004
    #9
  10. Michael Winter wrote:

    >> No no no, it's not hackish, that's just how javascript can be
    >> written, and most of the time, should be written (IMHO).

    >
    > The original just seemed cleaner. Self-contained.


    That's certainly true, and is indeed what should be presented if the OP
    doesn't know much about javascript; however the second is much more
    subtile, and tackles issues not considered in the first attempt.

    I was however simply raising myself against the term "hackish", which
    implies trying to patch/break into an inability of the language:) The
    use you've made of javascript wasn't therefore in my view hackish but
    rather completely normal, using regular javascript-specific optimisation
    techniques to achieve its goal.

    Anyway, your post, by presenting the two versions and providing leads on
    how to deal with the second one, was an excellent one.


    Cheers,
    Yep.
     
    Yann-Erwan Perio, Sep 25, 2004
    #10
  11. Michael Winter wrote:
    > Yann-Erwan Perio wrote:

    <snip>
    >>> It seems hack-ish, though. But it does work.

    >>
    >> No no no, it's not hackish, that's just how javascript can
    >> be written, and most of the time, should be written (IMHO).

    >
    > The original just seemed cleaner. Self-contained.


    As stated, when setTimeout/Interval are using sting arguments they have
    no choice but evaluate the string in the global context. So 'self
    contained' isn't necessarily achievable. But, loosing the integrity of
    the original anonymous function might be done in a way that made it
    dependent only on another unit that was itself self contained, and
    potentially re-usable.

    My inclination now is to pass execution-shedding tasks off to distinct
    components (that can handle these details themselves internally), but
    that development came out of re-usable toString functions such as:-

    var funcCallingToString = (function(){
    var fncId = '__f';
    var fnRfs = {};
    function actualToString(){
    var fId;
    while(fnRfs[fncId]){
    fncId = fncId + 'Q';
    }
    fnRfs[fncId] = this; //this - is the function object as toSting
    //is called as a method of the fucntion
    fId = fncId;
    this.toString = function(){
    return ('funcCallingToString.fr.'+fId+'()');
    }
    return this.toString();
    }
    actualToString.fr = fnRfs;
    return actualToString;
    })();

    - where the facility to reference the function globally is created as
    needed for any function with which the above is used as a toString
    method. (It has the drawback of creating an object full of references to
    what would be expected to be inner functions and so would inhibit
    garbage collection and the destruction of closures that had done their
    job. That problem could be mitigated to some extent by implementing a
    finalize/destroy mechanism, but it was facilitating that (and the more
    efficient removal of spent inner function references) that made me think
    that scheduling should itself be a task for more (internally) elaborate
    self-contained components.)

    However, using it with your original code might go:-

    window.onload = function() {
    var i = document.images['cassini'],
    j = 0,
    p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    'eight'],
    n = p.length;

    function flip() {
    i.src = 'images/' + p[j] + '.jpg';
    j = (j + 1) % n;
    }
    flip.toString = funcCallingToString;

    setInterval(flip, 1000);
    };

    - and the same - toString - function would also be available to any
    other functions needing the setTimeout/Interval fallback.

    Richard.
     
    Richard Cornford, Sep 25, 2004
    #11
  12. Michael Winter wrote:

    [. . . .]

    >> var photos = new
    >> Array("one","two","three","four","five","six","seven","eight")

    >
    >
    > Define arrays with literals:
    >
    > var photos = ['one', 'two', 'three', 'four', 'five', 'six',
    > 'seven', 'eight'];


    please, what is difference between these two ways of declaring arrays??

    a) mine: var photos = new
    Array("one","two","three","four","five","six","seven","eight")

    yours: var photos = ['one', 'two', 'three', 'four', 'five', 'six',
    'seven', 'eight'];

    thank you very much for yr help.. Frances
     
    Frances Del Rio, Sep 25, 2004
    #12
  13. Michael Winter wrote:

    [. . . . . ]

    >
    > var j = 0,
    > photos = ['one', 'two', 'three', 'four', 'five', 'six',
    > 'seven', 'eight'];
    >
    > function flip() {
    > document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
    > j = (j + 1) % photos.length;
    > }
    > // Call onload:
    > setInterval(flip, 1000);
    >
    > This is a simple version of what you want to achieve. setInterval will
    > call flip approximately every second. When it does, the first statement
    > will change the source of the IMG element, cassini, and increment the
    > index variable, j. The modulus (%) ensures that the value of j stays
    > within the range 0 <= j < 8.
    >
    > However, this code pollutes the global namespace. It also looks-up a
    > reference to the IMG, cassini, and the length property of the photos
    > array on every invocation of flip.
    >
    > window.onload = function() {
    > var i = document.images['cassini'],
    > j = 0,
    > p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    > 'eight'],
    > n = p.length;
    >
    > function flip() {
    > i.src = 'images/' + p[j] + '.jpg';
    > j = (j + 1) % n;
    > }
    > flip.toString = function() {return 'flip()';};
    >
    > setInterval(flip, 1000);
    > };
    >
    > That's quite a transformation.
    >
    > The first thing to note is the external function expression, function()
    > { ... }. You can think of this just like any other function, except it
    > doesn't have a name. What this does is produce a new scope level. As
    > with all functions, the local variables declared here aren't accessible
    > outside of the function. This means you can name variables, that would
    > normally be global, anything you like and not worry about them clashing
    > with other variables.
    >
    > Inside the function, things are much like they were last time, with two
    > slight differences:
    >
    > 1) A reference to the IMG element, cassini, has been assigned to the
    > variable, i. This allows it to be looked-up once only, rather than
    > repeatedly.
    > 2) Similarly, the length property of the array of filenames has been
    > stored in n. Like the reference to cassini, it doesn't change, so why
    > keep looking it up?
    >
    > There's a third difference, which follows after the declaration of
    > flip. All functions and objects have a method called toString. Whenever
    > a string value is required, and an object or function is given, this
    > method is called and string that represents that object is returned[1].
    > The setInterval function, like setTimeout, can accept two types as its
    > first argument. A function reference, and a string. Older browsers only
    > accept a string. Giving the function, flip, a toString method means
    > that browsers can convert the argument to a form they can use.


    Michael, thank you very very much for all your help.. I have just spent
    about an hour studying and dissecting your post.. and got the two
    sripts you gave me to work...

    http://www.francesdelrio.com/cassini/index_rolls.html
    http://www.francesdelrio.com/cassini/index_rolls_better-script.html

    (the first one -- the not-so-good script that u said...) takes longer to
    load.. (again, as I mentioned in an earlier post, my stuff loads a bit
    slow anyway b/c I'm being hosted abroad (in Chile..) by a friend, he's
    hosting me for free, and their int'l traffic is slower... these two
    scripts work perfectly locally, start running immediately; but on-line
    imgs take a bit to load..)

    I have two small questions:

    1) is this
    window.onload = function()

    the same as calling function in onload event handler in body tag?

    2) you have commas after the var declarations, I had never seen that..

    var i = document.images['cassini'],
    j = 0,

    of course have larger questions too.. still don't understand everything
    about this script, but at least now I have one that works so have
    something to study this with.. and re-digest everything you wrote..
    again, thank you very much.. Frances
     
    Frances Del Rio, Sep 25, 2004
    #13
  14. ok Michael, made images smaller, now they should load faster..

    http://www.francesdelrio.com/cassini/index_rolls.html
    http://www.francesdelrio.com/cassini/index_rolls_better-script.html

    again, many many thanks for your help... Frances


    Frances Del Rio wrote:

    >
    >
    > Michael Winter wrote:
    >
    > [. . . . . ]
    >
    >>
    >> var j = 0,
    >> photos = ['one', 'two', 'three', 'four', 'five', 'six',
    >> 'seven', 'eight'];
    >>
    >> function flip() {
    >> document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
    >> j = (j + 1) % photos.length;
    >> }
    >> // Call onload:
    >> setInterval(flip, 1000);
    >>
    >> This is a simple version of what you want to achieve. setInterval
    >> will call flip approximately every second. When it does, the first
    >> statement will change the source of the IMG element, cassini, and
    >> increment the index variable, j. The modulus (%) ensures that the
    >> value of j stays within the range 0 <= j < 8.
    >>
    >> However, this code pollutes the global namespace. It also looks-up a
    >> reference to the IMG, cassini, and the length property of the photos
    >> array on every invocation of flip.
    >>
    >> window.onload = function() {
    >> var i = document.images['cassini'],
    >> j = 0,
    >> p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    >> 'eight'],
    >> n = p.length;
    >>
    >> function flip() {
    >> i.src = 'images/' + p[j] + '.jpg';
    >> j = (j + 1) % n;
    >> }
    >> flip.toString = function() {return 'flip()';};
    >>
    >> setInterval(flip, 1000);
    >> };
    >>
    >> That's quite a transformation.
    >>
    >> The first thing to note is the external function expression,
    >> function() { ... }. You can think of this just like any other
    >> function, except it doesn't have a name. What this does is produce a
    >> new scope level. As with all functions, the local variables declared
    >> here aren't accessible outside of the function. This means you can
    >> name variables, that would normally be global, anything you like and
    >> not worry about them clashing with other variables.
    >>
    >> Inside the function, things are much like they were last time, with
    >> two slight differences:
    >>
    >> 1) A reference to the IMG element, cassini, has been assigned to the
    >> variable, i. This allows it to be looked-up once only, rather than
    >> repeatedly.
    >> 2) Similarly, the length property of the array of filenames has been
    >> stored in n. Like the reference to cassini, it doesn't change, so why
    >> keep looking it up?
    >>
    >> There's a third difference, which follows after the declaration of
    >> flip. All functions and objects have a method called toString.
    >> Whenever a string value is required, and an object or function is
    >> given, this method is called and string that represents that object
    >> is returned[1]. The setInterval function, like setTimeout, can accept
    >> two types as its first argument. A function reference, and a string.
    >> Older browsers only accept a string. Giving the function, flip, a
    >> toString method means that browsers can convert the argument to a
    >> form they can use.

    >
    >
    > Michael, thank you very very much for all your help.. I have just spent
    > about an hour studying and dissecting your post.. and got the two
    > sripts you gave me to work...
    >
    > http://www.francesdelrio.com/cassini/index_rolls.html
    > http://www.francesdelrio.com/cassini/index_rolls_better-script.html
    >
    > (the first one -- the not-so-good script that u said...) takes longer to
    > load.. (again, as I mentioned in an earlier post, my stuff loads a bit
    > slow anyway b/c I'm being hosted abroad (in Chile..) by a friend, he's
    > hosting me for free, and their int'l traffic is slower... these two
    > scripts work perfectly locally, start running immediately; but on-line
    > imgs take a bit to load..)
    >
    > I have two small questions:
    >
    > 1) is this
    > window.onload = function()
    >
    > the same as calling function in onload event handler in body tag?
    >
    > 2) you have commas after the var declarations, I had never seen that..
    >
    > var i = document.images['cassini'],
    > j = 0,
    >
    > of course have larger questions too.. still don't understand everything
    > about this script, but at least now I have one that works so have
    > something to study this with.. and re-digest everything you wrote..
    > again, thank you very much.. Frances
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
    >
     
    Frances Del Rio, Sep 25, 2004
    #14
  15. Michael Winter wrote:


    >
    > var j = 0,
    > photos = ['one', 'two', 'three', 'four', 'five', 'six',
    > 'seven', 'eight'];
    >
    > function flip() {
    > document.images['cassini'].src = 'images/' + photos[j] + '.jpg';
    > j = (j + 1) % photos.length;
    > }
    > // Call onload:
    > setInterval(flip, 1000);
    >
    > This is a simple version of what you want to achieve. setInterval will
    > call flip approximately every second. When it does, the first statement
    > will change the source of the IMG element, cassini, and increment the
    > index variable, j. The modulus (%) ensures that the value of j stays
    > within the range 0 <= j < 8.
    >
    > However, this code pollutes the global namespace. It also looks-up a
    > reference to the IMG, cassini, and the length property of the photos
    > array on every invocation of flip.
    >
    > window.onload = function() {
    > var i = document.images['cassini'],
    > j = 0,
    > p = ['one', 'two', 'three', 'four', 'five', 'six', 'seven',
    > 'eight'],
    > n = p.length;
    >
    > function flip() {
    > i.src = 'images/' + p[j] + '.jpg';
    > j = (j + 1) % n;
    > }
    > flip.toString = function() {return 'flip()';};
    >
    > setInterval(flip, 1000);
    > };


    I forgot to mention.. I started this as an exercise to learn how to
    implement loops w/setTimeOuts.. and yet both solutions you gave me have
    no loops!! thank you again... Frances
     
    Frances Del Rio, Sep 25, 2004
    #15
  16. I'll try to answer all of your questions in this one post.

    On Sat, 25 Sep 2004 14:02:13 -0400, Frances Del Rio <>
    wrote:

    > please, what is difference between these two ways of declaring
    > arrays??
    >a) mine: var photos = new Array("one","two","three","four","five",
    > "six","seven","eight")
    >yours: var photos = ['one', 'two', 'three', 'four', 'five',
    > 'six', 'seven', 'eight'];


    As far as the end result is concerned, none. Both produce arrays
    initialised with those values. However, it's generally considered good
    form to specify initialised values and objects with literals, rather than
    anything else. If you want to create an array with a certain number of
    uninitialised elements, then use the Array constructor with an argument
    specifying that amount.


    On Sat, 25 Sep 2004 15:40:12 -0400, Frances Del Rio <>
    wrote:

    > [...] these two scripts work perfectly locally, start running
    > immediately; but on-line imgs take a bit to load..)


    They won't start running until the document has loaded, which means that
    any images must have been loaded, too.

    > 1) is this
    > window.onload = function()
    >
    > the same as calling function in onload event handler in body tag?


    If you changed that function expression to just a function, yes.

    function myFunction() {
    // ...
    }

    // Don't add parentheses!
    window.onload = myFunction;

    is the same as

    <body onload="myFunction();">

    > 2) you have commas after the var declarations, I had never seen
    > that..
    >
    > var i = document.images['cassini'],
    > j = 0,


    It's simply a way of declaring several variables with one var statement.
    It's exactly the same as:

    var i = document.images['cassini'];
    var j = 0;
    // etc.

    I just prefer the former.

    It can also be used with for statements:

    for(var i = 0, n = obj.length; i < n; ++i) {

    a pattern I often use.


    On Sat, 25 Sep 2004 17:05:13 -0400, Frances Del Rio <>
    wrote:

    > I forgot to mention.. I started this as an exercise to learn how to
    > implement loops w/setTimeOuts.. and yet both solutions you gave me have
    > no loops!! thank you again... Frances


    "Looping" with setTimeout, in this sense, doesn't actually involve any
    kind of loop construct (for, do..while, etc) at all. It involves
    setTimeout calling a function, which itself uses setTimeout to call the
    same function. An example should make that clear:

    function myFunction() {
    // Do something periodically

    setTimeout(myFunction, 2000);
    }
    // Start the "loop" going
    myFunction();

    Once myFunction is called once, the setTimeout call placed within it calls
    myFunction again, two seconds later. This repeats ad infinitum.

    However, a more reliable two second period can be achieved using
    setInterval.

    function myFunction() {
    // Do something periodically
    }
    setInterval(myFunction, 2000);

    This is because the delay with the setTimeout "loop" would actually be,
    2000ms plus the time to execute the preceeding code. On a fast computer
    executing little code, that might still be 2000ms, but a larger function
    on a slower computer might be more obtrusive.

    Hope that helps,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 27, 2004
    #16
  17. JRS: In article <opsezjtq06x13kvk@atlantis>, dated Mon, 27 Sep 2004
    12:30:36, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
    ueyonder.co.invalid> posted :
    >"Looping" with setTimeout, in this sense, doesn't actually involve any
    >kind of loop construct (for, do..while, etc) at all. It involves
    >setTimeout calling a function, which itself uses setTimeout to call the
    >same function. An example should make that clear:
    >
    > function myFunction() {
    > // Do something periodically
    >
    > setTimeout(myFunction, 2000);
    > }
    > // Start the "loop" going
    > myFunction();


    The call to setTimeout can be placed at the beginning of myFunction. I
    do not know what happens if the first myFunction has not completed
    before the next is called.


    >Once myFunction is called once, the setTimeout call placed within it calls
    >myFunction again, two seconds later. This repeats ad infinitum.
    >
    >However, a more reliable two second period can be achieved using
    >setInterval.
    >
    > function myFunction() {
    > // Do something periodically
    > }
    > setInterval(myFunction, 2000);
    >
    >This is because the delay with the setTimeout "loop" would actually be,
    >2000ms plus the time to execute the preceeding code. On a fast computer
    >executing little code, that might still be 2000ms, but a larger function
    >on a slower computer might be more obtrusive.


    One must also consider the mechanism whereby Timeout or Interval is
    implemented. In Win98, I find that neither is exact on the long-term
    average.

    See <URL:http://www.merlyn.demon.co.uk/js-date0.htm#TaI>, using a
    variety of computer types, operating systems and browsers - and someone
    let me know what happens!

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Sep 27, 2004
    #17
  18. Frances Del Rio wrote:

    > Michael Winter wrote:
    >>> var photos = new
    >>> Array("one","two","three","four","five","six","seven","eight")

    >>
    >> Define arrays with literals:
    >>
    >> var photos = ['one', 'two', 'three', 'four', 'five', 'six',
    >> 'seven', 'eight'];

    >
    > please, what is difference between these two ways of declaring arrays??


    The second one (the Array initializer) requires at least JavaScript 1.1
    and/or an ECMAScript 3 compliant language implementation. (The different
    quote character does not matter.)


    HTH

    PointedEars
    --
    Twice as good as a can of Raid!
     
    Thomas 'PointedEars' Lahn, Oct 10, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andy Pickering

    Smart navigation and js setTimeout

    Andy Pickering, Oct 24, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    507
    Andy Pickering
    Oct 27, 2003
  2. j van c

    settimeout

    j van c, Dec 5, 2003, in forum: HTML
    Replies:
    5
    Views:
    501
    Nico Schuyt
    Dec 7, 2003
  3. JR

    setTimeout

    JR, Apr 15, 2004, in forum: HTML
    Replies:
    3
    Views:
    551
    Whitecrest
    Apr 15, 2004
  4. =?Utf-8?B?RQ==?=

    javascript setTimeout does not work

    =?Utf-8?B?RQ==?=, May 2, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    8,843
    =?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=
    May 2, 2006
  5. Colin Brown

    socket settimeout ?

    Colin Brown, Dec 3, 2003, in forum: Python
    Replies:
    0
    Views:
    628
    Colin Brown
    Dec 3, 2003
Loading...

Share This Page