Question

＆＃13;

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

＆＃13;

我想要使用多个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>

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

javascript - setInterval（）的动态变量名

1 个答案: