Javascript issue with looping

Question

Hi I've got a bit of a problem with some javascript I'm trying to make work the JS functions are below

var changing_thumbs = new Array();
function changeThumb(index, i, thumb_count, path) {
    if (changing_thumbs[index]) {
        if (path.indexOf('imageCount=') !== -1) {
            lastIndexOfEquals = path.lastIndexOf('=');
            path = path.substring(0, lastIndexOfEquals + 1);
            $j('#' + index).attr('src', path + i);
        }
        else {
            $j('#' + index).attr('src', path + '&imageCount=' + i);
        }
            i = i % thumb_count + 1;
        changing_thumbs[index] = setTimeout("changeThumb('" + index + "', '" + i + "', '" + thumb_count + "', '" + path + "')", 600);
    }
}
function startVideoPreview(index, thumb_count, path) {
   changing_thumbs[index] = true;
   changeThumb(index, 1, thumb_count, path);
}
function endVideoPreview(index, path) {
   clearTimeout(changing_thumbs[index]);
   document.getElementById(index).src = path;
}

The html calling is below

<img id="3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be" src="/Image/GetClipImg?photoID=3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be&userID=2" alt="Test Clip Description" onmouseout="endVideoPreview('3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be', '/Image/GetClipImg?photoID=3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be&userID=2')" onmouseover="startVideoPreview('3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be', 7, '/Image/GetClipImg?photoID=3a80b9aa-8b2f-4fb9-b3b0-02b2f55bf3be&userID=2')">

Everything seems to work fine but these two lines

i = i % thumb_count + 1;
changing_thumbs[index] = setTimeout("changeThumb('" + index + "', '" + i + "', '" + thumb_count + "', '" + path + "')", 600);

Never get hit after executing the previous IF statement they just get stepped over. I'm sure this is going to be something basic but I'm newish to JS and I can't seem to see what the problem is. Any hints or tips would be appreciated.

Answer 1

setTimeout need a callback.

And don't use string as the first parameter, use a function.

Try this:

changing_thumbs[index] = setTimeout(function() {
  changeThumb(index, i, thumb_count, path);
}, 600);