JavaScript, thumbnail ()

Question

The animation (image changes) doesn't stop on the onmouseout event. Why?

JavaScript:

function thumbnail ( type, start, i, m, id, begin, end ) 
{
    if ( type == 1 ) 
    {
        document.getElementById(id).src = begin + id + i + end;

        if ( i == m + 1 ) 
        {
            document.getElementById(id).src = begin + id + end;
            i = 2;
        } 
        else 
        {
            i++;
        }

        setTimeout("thumbnail(1, "+start+", "+i+", "+m+", '"+id+"', '"+begin+"', '"+end+"');", 1000 );
    }

    if ( type == 2 ) 
    {
        document.getElementById(id).src = begin + id + end;
    }
}

HTML:

<img id="aaa" src="http://example.com/file/aaa.png" width="160" height="120" onmouseover="thumbnail(1,2,2,9,'aaa','http://example.com/file/','.png');" onmouseout="thumbnail(2,2,2,9,'aaa','http://example.com/file/','.png');" />

Images:

aaa.png, aaa2.png, ..., aaa9.png

Quentin · Answer 1 · 2012-01-25T12:56:37.393

0

Because you call setTimeout recursively and have no condition that will ever stop it.

edited Jan 25 '12 at 12:56

answered Jan 25 '12 at 12:51

Quentin

914,110
126
1,211
1,335

Yes, but how to stop it when onmouseout? – csillagharcos Jan 25 '12 at 12:53

score 0 · Accepted Answer · answered Jan 25 '12 at 19:43

Try something like this:

var delay;

function thumbnail ( type, start, i, m, id, begin, end ){
  if ( type == 1 ){
    document.getElementById(id).src = begin + id + i + end;
    if ( i == m + 1 ){
      document.getElementById(id).src = begin + id + end;
      i = 2;
    } 
    else{
      i++;
    }
    if(delay) clearTimeout('delay');
    delay = setTimeout("thumbnail(1, "+start+", "+i+", "+m+", '"+id+"', '"+begin+"', '"+end+"');", 1000 );
  }
  if ( type == 2 ){
    document.getElementById(id).src = begin + id + end;
    clearTimeout('delay');
  }
}

JavaScript, thumbnail ()

2 Answers2