javascript-setInterval（）的动态变量名称

Question

 <script src="https://ajax.googleapis.com/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.com/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.com/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.com/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> 

我想使用多个setInterval()并一次性清除所有这些。

<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>

如果我同时将mouseover 2个div上，则该代码将无法正常工作。

我认为：首先我将mouseover在div1 ，函数divOver创建了一个变量名称interval 。 之后（尚未清除interval ），我将mouseover在div2 ，函数divOver组成了一个具有相同名称interval的新变量。 因此，第一个interval可以被覆盖。 这样对吗？

为了避免该问题，我考虑将setInterval()与id 。 像这样：

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

但这不是javascript语法。 您能给我任何解决此问题的想法吗？

Answer 1

为了回答您的问题，如何同时保持不同时间间隔的记录，以及如何在功能范围之外启动和停止它们。

您需要保持带有间隔的关联数组，以便可以同时存在多个间隔。

<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>

尽管如前所述，这很可能无法解决您的实际问题。