CODEWITHSUNDEEP
javascript
hamze torabzade
hamze torabzade

Reputation: 7331

stop function that run with setTimeout

I want stop my function that run with setTimeout and do not show image followed mouse. I want do that with button click, how do that? my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
    var trailimage = ["test.gif", 100, 99];
    var offsetfrommouse = [-25, -25];
    var displayduration = 0;
    function truebody() {
        return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
    }
    function hidetrail() {
        var x = document.getElementById("trailimageid").style;
        x.visibility = "hidden";
        document.onmousemove = "";
    }
    function followmouse(e) {
        var xcoord = offsetfrommouse[0];
        var ycoord = offsetfrommouse[1];
        if (typeof e != "undefined") {
            xcoord += e.pageX;
            ycoord += e.pageY;
        }
        else if (typeof window.event != "undefined") {
            xcoord += truebody().scrollLeft + event.clientX;
            ycoord += truebody().scrollTop + event.clientY;
        }
        var x = document.getElementById("trailimageid").style;
        x.left = xcoord + "px";
        x.top = ycoord + "px";            
    }

        alert("obj_selected = true");
        document.onmousemove = followmouse;
        if (displayduration > 0)
            setTimeout("hidetrail()", displayduration * 1000);

</script>
</head>
<body>
<form id="form1" runat="server">

    <img alt="" id="trailimageid" src="Pictures/sides/sides-not-clicked.gif" border="0" style="position: absolute; visibility: visible; left: 0px;
    top: 0px; width: 50px; height: 50px"/>

</form>
 </body>
</html>

Upvotes: 2

Views: 9056

Answers (3)

neeebzz
neeebzz

Reputation: 11538

you use timeout like >

var myTimeout = setTimeout(yourfunction);

and then you can cancel it >

clearTimeout(myTimeout);

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075875

Save the return value of setTimeout, which is a "handle" for the timer, and when you want to cancel it, call clearTimeout with that value.

So in your code, you'd declare a timerHandle variable somewhere appropriate, then set it here:

if (displayduration > 0)
    timerHandle = setTimeout("hidetrail()", displayduration * 1000);

...and then create a button click handler:

function cancelTimeoutOnClick() {
    if (timerHandle) {
        clearTimeout(timerHandle);
        timerHandle = 0;
    }
}

Off-topic: It's almost never best practice to pass strings into setTimeout, that's an implicit eval. In your case, just pass the function reference:

if (displayduration > 0)
    timerHandle = setTimeout(hidetrail, displayduration * 1000);
                          // ^--- Difference here (no quotes, no parentheses)

Upvotes: 1

deceze
deceze

Reputation: 522625

var foobarTimeout = setTimeout(foobar, 1000);

...

clearTimeout(foobarTimeout);

See:
https://developer.mozilla.org/en/DOM/window.setTimeout
https://developer.mozilla.org/en/DOM/window.clearTimeout

Upvotes: 6

Related Questions