CODEWITHSUNDEEP
jquery
hari haran
hari haran

Reputation: 127

Set time out for Mouse Move Event?

Below Is my code . i have added Mousemove function for images. i want to set time out for the Images. i want to reduce the speed of mousemove. i dont know how to change it. so please help me out here.

<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
function inc(){
var count=$("#image").attr("alt");
count++;
if(count==20){count=1;}
if(count==40){count=21;}
if(count==60){count=41;}
if(count==80){count=61;}
if(count==100){count=81;}
if(count==120){count=101;}
if(count==140){count=121;}
if(count==160){count=141;}
if(count==180){count=161;}
if(count==200){count=181;}
if(count==220){count=201;}
if(count==240){count=221;}
if(count==260){count=241;}
if(count==280){count=261;}
$("#image").attr("alt",count);
$("#image").attr("src","rm1200_"+count+".jpg");
}
function dec(){
var count=$("#image").attr("alt");
count--;
if(count==0){count=19;}
if(count==20){count=39;}
if(count==40){count=59;}
if(count==60){count=79;}
if(count==80){count=99;}
if(count==100){count=119;}
if(count==120){count=139;}
if(count==140){count=159;}
if(count==160){count=179;}
if(count==180){count=199;}
if(count==200){count=219;}
if(count==220){count=239;}
if(count==240){count=259;}
if(count==260){count=284;}

$("#image").attr("alt",count);
$("#image").attr("src","rm1200_"+count+".jpg");
}
function nov(){
var count=$("#image").attr("alt");
count=parseInt(count)+19;
if(count <=284)

$("#image").attr("alt",count);
$("#image").attr("src","rm1200_"+count+".jpg");
}
function aug(){
var count=$("#image").attr("alt");
count=parseInt(count)-19;
if(count >=1)
$("#image").attr("alt",count);
$("#image").attr("src","rm1200_"+count+".jpg");
}

</script>
<div id="hari">


<img id="image" alt="1" src="rm1200_1.jpg"/>
<img id="image1" onmousemove="aug()"style="position:relative;left: -606px;top: -261px;opacity:0;" src="3.png"/>
<img id="image1" onmousemove="inc()"style="position:relative;left: 0px;bottom: 404px;opacity:0;" src="2.png"/>
<img id="image1" onmousemove="dec()"style="position:relative;left: 307px;bottom: 405px;opacity:0;" src="4.png"/>
<img id="image1" onmousemove="nov()"style="position:relative;left: -297px;bottom: 404px;opacity:0;" src="5.png"/>
</div>

Upvotes: 0

Views: 359

Answers (1)

Alex McMillan
Alex McMillan

Reputation: 17952

What you are describing is known as debouncing

Add this function to your page:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

And then if you want a 100ms delay between calls:

aug = debounce(aug, 100);

Upvotes: 1

Related Questions