SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    NYC
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript Flip clock help

    I have coded up a flip clock from scratch. About halfway through I stumbled up on Eric Garside's excellent clock at
    http://eric.garside.name/demo/epiclock.html#ec-flip
    but I wanted a higher frame rate and didn't want to write so much css to achieve it so I muddled on in my own way.

    Here are the results:

    http://dev.designrh.com/clock/flipclock.php

    there are some strange problems though. I've had to throw in a correction every 10 secs or else the clock goes berserk if I leave it running too long. The correction is on lines 258-262 of clock.js. I thought there might be too much code to paste here but you are welcome to view the source at the link above.

    The basic idea is that I initialize the time with :
    initFlipTime();

    Which gets the current time with

    var curdate = new Date();
    var seconds = curdate.getSeconds();

    so on and so forth for the mins and hours

    I then set up an interval:
    flipInt = setInterval('updateFlipTime()', 1000);

    which checks to see if the time has changed and then runs the moveInteger() function as such:
    moveInteger('clock_10thsecond_holder', 30);

    Which sets off another setInterval to control animation of the clock by moving the background image up a frames height at a time, -88 px, using setStyle() from the prototype class. The other functions control when the other parts of the clock flip when say seconds get to 10 or something.

    I am using a lot of setIntervals here and I wonder if that is why it is so buggy. I do like the look and control of frame rate though so I would welcome suggestions on how to improve my chewing gum and bailing wire effort!

    Feel free to use and improve on anything you find interesting, and thanks in advance for any help.

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In browsers, JavaScript is single-threaded. You can't have multiple scripts / functions running in parallel (although look into web workers for some progress here).

    setInterval will try to run code at the specified interval. If other code is running it will queue. If a particular interval timer is already queued, when that timer fires again it will not be added to the queue again.

    For your clock, the intervals will end up blocking each other as different ones try to fire while code is being executed. You probably have updateFlipTime() overlapping with moveInteger();

    You could try altering the frame rate and number of frames for each flip depending on how much time is left before that digit should next flip.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    NYC
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh Bach. Ok well I thought the setIntervals might be the problem. I guess I have some architecture work to do. Or I might just heave it and do it all in flash. Thanks for the help!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •