<script src=".1.1/jquery.min.js"></script>
<div  onmouseover="animatedStickers($(this), 17, 5, 4, 2, 3)" style="float: left; background-image: url('.png'); background-size: 380px 304px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<div  onmouseover="animatedStickers($(this), 16, 4, 4, 4, 3)" style="float: left; background-image: url('.png'); background-size: 304px 304px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<div onmouseover="animatedStickers($(this), 22, 5, 5, 2, 3)" style="float: left; background-image: url('.png'); background-size: 380px 380px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<script>
  var loop = 1;
        var stickerInterval = function (element, x, y, last) {            
            var pos = $(element).css('backgroundPosition').split(' ');
            var xPos = parseInt(pos[0].split('px')[0]) - 6 - 6 - 64;
            var yPos = parseInt(pos[1].split('px')[0]);
            var maxX = ((-6 - 6 - 64) * (x - 1)) - 6;
            var maxY = ((-6 - 6 - 64) * last) - 6;
            
            if (loop == y && xPos == maxY) {
                // end 1 turn
                loop = 1;
                xPos = -6;
                yPos = -6;
            } else if (loop < y && xPos < maxX) {
                xPos = -6;
                yPos = yPos -6 -6 -64;
                loop++;
            }
            $(element).css('background-position', xPos + 'px ' + yPos + 'px');
        };
        
        var animatedStickers = function (element, total, x, y, last, times) {
            $(element).removeAttr('onmouseover');                                    
            var interval = setInterval(function () { stickerInterval(element, x, y, last) }, 175);

            setTimeout(function () {
                clearInterval(interval);
                loop = 1;
                $(element).css('background-position', '-6px -6px');
                $(element).attr('onmouseover', 'animatedStickers($(this), ' + total + ', ' + x + ', ' + y + ', ' + last + ', ' + times + ')')
            }, 175 * total * times);
        };
  </script>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  onmouseover="animatedStickers($(this), 17, 5, 4, 2, 3)" style="float: left; background-image: url('http://googledrive./host/0B-UH4_eX_YisdlJ4cU9qZ1lwM3c/Tuzki1.png'); background-size: 380px 304px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<div  onmouseover="animatedStickers($(this), 16, 4, 4, 4, 3)" style="float: left; background-image: url('http://googledrive./host/0B-UH4_eX_YisdlJ4cU9qZ1lwM3c/Tuzki2.png'); background-size: 304px 304px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<div onmouseover="animatedStickers($(this), 22, 5, 5, 2, 3)" style="float: left; background-image: url('http://googledrive./host/0B-UH4_eX_YisdlJ4cU9qZ1lwM3c/Tuzki3.png'); background-size: 380px 380px; cursor: pointer; height: 64px; width: 64px; background-position: -6px -6px;  color: transparent">Tuzki</div>

<script>
  var loop = 1;
        var stickerInterval = function (element, x, y, last) {            
            var pos = $(element).css('backgroundPosition').split(' ');
            var xPos = parseInt(pos[0].split('px')[0]) - 6 - 6 - 64;
            var yPos = parseInt(pos[1].split('px')[0]);
            var maxX = ((-6 - 6 - 64) * (x - 1)) - 6;
            var maxY = ((-6 - 6 - 64) * last) - 6;
            
            if (loop == y && xPos == maxY) {
                // end 1 turn
                loop = 1;
                xPos = -6;
                yPos = -6;
            } else if (loop < y && xPos < maxX) {
                xPos = -6;
                yPos = yPos -6 -6 -64;
                loop++;
            }
            $(element).css('background-position', xPos + 'px ' + yPos + 'px');
        };
        
        var animatedStickers = function (element, total, x, y, last, times) {
            $(element).removeAttr('onmouseover');                                    
            var interval = setInterval(function () { stickerInterval(element, x, y, last) }, 175);

            setTimeout(function () {
                clearInterval(interval);
                loop = 1;
                $(element).css('background-position', '-6px -6px');
                $(element).attr('onmouseover', 'animatedStickers($(this), ' + total + ', ' + x + ', ' + y + ', ' + last + ', ' + times + ')')
            }, 175 * total * times);
        };
  </script>

I wanna use multiple setInterval() and clear all of them NOT in a time.

<div id="div1" onmouseover="divOver($(this))"></div>
<div id="div2" onmouseover="divOver($(this))"></div>

<script>
var divOver = function (element) {
   var id = $(element).attr('id'); // get id

   //call setInterval() without the id
   var interval = setInterval(function(){ /* do something... */ }, 500);

   //clear interval after 1s
   setTimeout(function(){ clearInterval(interval) }, 1000);
};
</script>

That code doesn't work fine if I mouseover 2 divs at the same time.

I think: The first I mouseover on div1, function divOver creates a variable name interval. After that (haven't cleared interval yet), I mouseover on div2, function divOver tinues creating a new variable with the same name interval. So, the first interval can be overridden. Is it right?

To avoid that problem, I think about using setInterval() with id. Something's like this:

var id = $(element).attr('id');
//var interval_ + id = setInterval(function(){ /* do something... */ }, 500);

But that's not javascript syntax. Can you give me any idea to fix this problem?

• javascript
• jquery

Share Follow edited Nov 4, 2015 at 15:35 asked Nov 4, 2015 at 15:20 user4090029user4090029 13

• 3 I don't see why that code wouldn't work. interval is a local variable. – Quentin Commented Nov 4, 2015 at 15:22
• can you provide a fiddle ? – Gonzalo.- Commented Nov 4, 2015 at 15:22
• 2 SO has supported inline live demos for over a year now. No need to run off to externally hosted sites like JS Fiddle. – Quentin Commented Nov 4, 2015 at 15:23
• If you'd identified your problem correctly, this would be a duplicate of this question. But that is unlikely to help with your real problem. – Quentin Commented Nov 4, 2015 at 15:24
• 1 I still feel jsfiddle more fortable. – Gonzalo.- Commented Nov 4, 2015 at 15:28

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 8

To answer your question how to maintain a record of different intervals at the same time and being able to start and stop them outside the function scope.

You need to keep an associative arrays with the intervals, such that there can be many intervals at the same time.

<div id="div1" onmouseover="divOver($(this))"></div>
<div id="div2" onmouseover="divOver($(this))"></div>

<script>
var intervals = []
var divOver = function (element) {
   var id = element.attr('id'); // get id

   //call setInterval() with the id
   intervals['i'+id] = setInterval(function(){ /* do something... */ }, 500);

   //clear interval after 1s
   setTimeout(function(){ clearInterval(intervals['i'+id]) }, 1000);
};
</script>

Though as already mentioned this does most likely not solve your real problem.