Javascript timer problem

[tefflox]

Hi, I'm working on the following code for a google gadget [ view gadget ]. It is kind of neat the way it is, but the question I've got may be obvious, regarding the mouseover function. It needs to break on mouseout. I guess it will need a loop. Any help is appreciated.

function mouseOver() {
     
     var t = setTimeout("document.b1.src='yellow_green.gif'", 300)
         t = setTimeout("document.b1.src='red_green.gif'", 2700)
     }

    function mouseOut() {
     var t = setTimeout("document.b1.src='green_green.gif'", 300)
     }

[MidiMagic]

I don't think you are using setTimeout correctly.

The setTtimeout function wants a function call as a parameter, not a statement or an object. It delays the calling of that function, but does not delay any of the statements after the call. You are trying to call a statement as a function. IE might try to do something anyway, but it is a nonstandard kludge.

Objects are not only forbidden as parameters to setTimeout, but are also forbidden as parameters to the function that is called.

Call a function with setTimeout, and insert the graphic in that function's code.

[tefflox]

Keep in mind that I am an amateur. I understand about half of your statements, tho, as you see, the code does work, as it is...

What I need is to keep it from turning red if the client moves the mouse out before the timer counts to 3000 milliseconds.

[MidiMagic]

Use ClearTimeout(t) to cancel a setTimeout event before it activates. The t is the variable you set in the t = setTimeout() call. For your purpose, this t must be a global variable.

But note this. You resetting the t in the second statement destroyed your ability to prevent the first one from executing. You need a separate variable and a separate clearTimeout for each setTimeout timer you start. And using the var statement in the function call destroyed the ability to cancel the timer anywhere outside the calling function mouseOver().

Your code may happen to work on your browser, but it is definitely nonstandard. It will fail on many browsers, and will probably fail on all browsers in the near future, as they become more standards-compliant.

I would write it this way:

// global variables
var t1, t2, t3;

function yelgreen(){
  document.b1.src='yellow_green.gif;
};

function redgreen(){
  document.b1.src='red_green.gif;
};

function greengreen(){
  document.b1.src='green_green.gif;
};

function mouseOver() {
  t1 = setTimeout("yelgreen()", 300);
  t2 = setTimeout("redgreen()", 2700);
};

function mouseOut() {
  clearTimeout(t1);
  clearTimeout(t2);
  t3 = setTimeout("greengreen()", 300);
};

[tefflox]

Thank you.

Well, anyhow, it's just a gadget, and I'm an amateur.

I'm not really sure how to proceed, but I will tinker with the ClearTimeout function(?)

[MidiMagic]

I just changed it. Look again.

[gurl]

MidiMagic is incorrect. The setTimeout function will accept expressions and statements as a parameter and is perfectly valid in all browsers.

I'm sure Midi was a noob at one point. Don't let anyone talk down to you about what is forbidden and what isn't — especially when your code doesn't even attempt to pass an object and when they are blatantly wrong without having looked it up first.

This, "Your code may happen to work on your browser, but it is definitely nonstandard. It will fail on many browsers, and will probably fail on all browsers in the near future, as they become more standards-compliant." is just rude, annoying, and WRONG.

Keep on coding!

[tefflox]

Yeh that code is valid. It's been a while since this particular problem, but when in doubt, check the master source: listenlight.net/13 -- complete mastery of javascript timing :-)