Javascript 计时器不一致

Question

我知道关于 Javascript 计时器的主题有很多，但是，每次我的鼠标悬停在 div 上调用命令时，我的计时器实际上都会“加倍”，它们并不一致。下面的 div 显示了调用的 onmouseover 事件的功能。

<div id="Team_Container2"><div id="Image1" onmouseover="area_hover1(this);area_hover2(this)"></div>
<div id="Team_Container2"><div id="Image2" onmouseover="area_hover1(this);area_hover2(this)"></div>



function area_hover1(obj) {
    var interval;
    clearInterval(interval);
    href = $(obj).attr('href');
    url = href.split('#');
    url1 = url[1];
    interval = setInterval(function() {setAreaOver(document.getElementById(url1), 'Seating_Plan_Image_canvas', '0,0,0', '0,0,0', '0.33', 0, 0, 0);}, 1000);
            return;
}

function area_hover2(obj) {
        var interval;
        href = $(obj).attr('href');
        url = href.split('#');
        url1 = url[1];
        clearInterval(interval);
        interval = setInterval(function() {setAreaOver(document.getElementById(url1), 'Seating_Plan_Image_canvas', '0,0,0', '0,0,0', '0.0', 0, 0, 0);}, 2000);
        return;
}

我如何调整计时器或将两个函数合并为一个函数并在另一个函数之后执行一个“setInterval”。

如果有意义的话，我需要将area_hover2设置间隔设置为在第一个Area_hover1设置间隔之后大约500毫秒。

任何帮助将不胜感激!

谢谢阿杰

Answer 1

每次将鼠标悬停在图像上时，都会启动一个新的 setInterval，因为您的 clearInterval() 命令实际上并未执行任何操作。您在悬停函数内定义了保存 setInterval() 指针的变量，因此一旦退出，该变量就会消失。您需要的是:

var interval; // Defined in global scope
function area_hover1(obj) {
   clearInterval(interval); // Abort any existing hover interval
   // Set up variables
   interval = setInterval(function() { /* doStuff */ }, 1000);
}

您可能还需要捕获 onMouseOut 事件来停止间隔，因为现在即使鼠标不再悬停在元素上，它也会继续运行。