clearTimeout not working

问题

I'm trying to make image rotator with Jquery, but my rotator won't stop when I put the mouse over the images, so I'm guessing that something's wrong with clearTimeout.
Here's my code:

$(document).ready(function () {
    var o = 0
    var t = null;
    stop = false;
    $("img:gt(0)").hide();
    broj = ($("img").size());

    function promena() {
        o++;
        if (o == broj) {
            o = 0;
            $("img:lt(3)").hide(function () {
                $("img").eq(3).delay(1000).fadeOut(1000);
            });
        }
        $("img").eq(o).delay(1000).fadeIn(1000, function () {
            t = setTimeout(promena, 1000);
        });
    };

    t = setTimeout(promena, 1000);
    $("div img").mouseover(function () {
        clearTimeout(t);
    });
});

And here's HTML:

<html>
<head>
<title>M</title>
</head>
<body>
 <div>
 <img src="images/1.jpg"    />
 <img src="images/2.jpg"    />
 <img src="images/3.jpg"    />
 <img src="images/4.jpg"    />
 </div>
</body>
</html>

If it means anything, all of my images are positioned absolutely with img{position:absolute}

回答1:

Your code is essentially doing this:

timeout timer running for one second
delay running for one second
fade running for one second
repeat

--> if you trigger the mouseover event, and hence call clearTimeout at any point other than (1), you aren't clearing any running timer.

In other words, if you do this after, lets say 1.5 seconds, the delay is still running, then the fade, and then you call setTimeout again - so you are attempting to clearTimeout before calling setTimeout.

You should probably call .stop() to stop the delay and fade queue, and prevent setTimeout running when they are complete.

来源：https://stackoverflow.com/questions/5462948/cleartimeout-not-working

标签

javascript

jquery

image

settimeout

rotator