An easy function question

Discussion in 'JavaScript' started by Funk-woo10, Oct 15, 2009.

  1. #1
    Hi all,

    Here is a function -

    function photoLoop() {
    fade1L('3000');fade1M('3500');fade1R('4000');
    }

    When the body is loaded i call the function -

    <body onload="photoLoop();>

    When the photoLoop function has called the last function fade1R I need it to go back to the start(fade1L) and start over again and again....

    How can I do this ?

    Thanks.
     
    Funk-woo10, Oct 15, 2009 IP
  2. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Maybe in your declaration for function fade1R() :

    function fade1R( your_argument ) {
    // your function content
    photoLoop();
    }
    HTML:
     
    ads2help, Oct 15, 2009 IP
  3. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #3
    if I call the photoLoop(); back into fade1R it crashes.
     
    Funk-woo10, Oct 15, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    
    var looper = {
        timer: null,
        loopDelay: 5000, // 5 seconds.
        start: function() {
            this.timer = setInterval(function() {
                fade1L('3000');
                fade1M('3500');
                fade1R('4000');
            }), this.loopDelay);
        },
        stop: function() {
            clearInterval(this.timer);
        }
    };
    
    // to start it:
    looper.start(); 
    
    // you may want to stop it, say on mouseover:
    looper.stop();
    
    
    PHP:
    keep in mind that if your 3 functions that fade take a while to run you will need to tweak the delay between repeating the loop.

    good luck - and keep in mind that the fade1L('3000');fade1M('3500');fade1R('4000'); is very bad practice. consider writing one function that can do the fade.

    for example:
    Element.prototype.fader = function(num) {
        // this = element. write code that does fade of 'this'
        // careful as this is not protypable so easily in IE.
    };
    
    document.getElementById("1L").fader(3000);
    document.getElementById("1M").fader(3500);
    document.getElementById("1R").fader(4000);
    
    // or 
    var fade = function(el, num) {
       // apply to el
    };
    
    fade(document.getElementById("1L"), 3000); // etc.
    
    PHP:
    you get the idea--code to the pattern. no need for 1000s of functions cluttering the browser namespace. if you need to change the effect, you change 1 function, not 3!
     
    dimitar christoff, Oct 15, 2009 IP
  5. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #5
    wow thanks, i'll try that now.

    Is it better to place that in the <head> the refer to it in the <body>

    Thanks agian !:)
     
    Funk-woo10, Oct 15, 2009 IP
  6. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #6
    right got it to work, BUT its not looping back to the first function
     
    Funk-woo10, Oct 15, 2009 IP
  7. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #7
    is there a charactor missing in this line -
    }), this.loopDelay);
    PHP:
     
    Funk-woo10, Oct 15, 2009 IP
  8. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #8
    well - that would depend. don't see any errors, do you get a js exception/error? to test if its running fine, add:


    fade1R('4000');
    alert("running!");

    perhaps the function you have cannot be repeated - can you post the contents of one of them?
     
    dimitar christoff, Oct 15, 2009 IP
  9. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #9
    hmm ok it says its running, but its not looping. the contents of fade1L('') looks like -

    
    function fade1L(thetime) { setTimeout("MM_effectAppearFade('photo1L', 500, 100, 0, false)", thetime);}
    
    PHP:
     
    Funk-woo10, Oct 16, 2009 IP
  10. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #10
    btw i also have to change this

    }), this.loopDelay);
    PHP:
    to this

    }), this.loopDelay
    PHP:
    for it not error
     
    Funk-woo10, Oct 16, 2009 IP
  11. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #11
    this change is wrong. the this.loopDelay needs to be inside of the construct to be a parameter

    i am sorry just saw
    its missing a (

    change to:
    var looper = {
        timer: null,
        loopDelay: 5000, // 5 seconds.
        start: function() {
            this.timer = setInterval((function() {
                fade1L('3000');
                fade1M('3500');
                fade1R('4000');
            }), this.loopDelay);
        },
        stop: function() {
            clearInterval(this.timer);
        }
    };
    
    PHP:
    there's an extra ( after setInterval - > setInterval((function.

    sorry - typing into a forum w/o testing is a bit hard :D
     
    dimitar christoff, Oct 16, 2009 IP
    Funk-woo10 likes this.
  12. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #12
    thanks, this works, BUT...now I have to wait 12 seconds before the first it starts. I need the functions to start instantly not wait 5 seconds....any suggestions ?
     
    Funk-woo10, Oct 16, 2009 IP
  13. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #13
    erm, change the loopDelay: 0 (from 5000)
     
    dimitar christoff, Oct 16, 2009 IP
  14. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #14
    tried that but then it does does loop back to the start.
     
    Funk-woo10, Oct 16, 2009 IP
  15. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #15
    heh, just experiment. i guess 0 wont be too good - the value is is in ms, so 1000ms = 1 sec, 5000 = 5 etc. to get it right, time how long it takes for the fade cycle to run and add a second to it (allowing for cpu lag because your inner function uses eval by being written like so:
    setTimeout("MM_effectAppearFade('photo1L', 500, 100, 0, false)", thetime)
    PHP:
    -because of the " " around the string and not using anonymous function, javascript is forced to pause execution, run a new instance of the interpreter that can evaluate and compile the string in a safe way and pass it back to the parent thread.

    anyway. to be fair, what we're doing here is rubbish - needs a rethink. using 1 wrapper that runs perdiodically 3 other functions that run on a timer is simply ludicrous :)

    you can loop each individual one like that:
    setInterval((function() {
        MM_effectAppearFade('photo1L', 500, 100, 0, false);
    }), 3000);
    PHP:
     
    dimitar christoff, Oct 16, 2009 IP
  16. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #16
    hmm i know its not great, but I can only modify what a client has given, I cannot re-write it....(I would like to!!!)

    The client just 'wants it to work'.....
     
    Funk-woo10, Oct 19, 2009 IP
  17. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #17
    is this alan partridge (sic) in your avatar :D
     
    dimitar christoff, Oct 19, 2009 IP
  18. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #18
    alan rules.
     
    Funk-woo10, Oct 20, 2009 IP