Javascript计时器不一致

我知道有很多关于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;
}

功能区1（obj）{
var区间；
间隔时间；
href=$（obj.attr（'href'）；
url=href.split（“#”）；
url1=url[1]；
interval=setInterval（函数（）{setAreaOver（document.getElementById（url1），'seatching\u Plan\u Image\u canvas'，'0,0,0,0'，'0.33'，0,0,0）；}，1000）；
返回；
}
功能区2（obj）{
var区间；
href=$（obj.attr（'href'）；
url=href.split（“#”）；
url1=url[1]；
间隔时间；
interval=setInterval（函数（）{setAreaOver（document.getElementById（url1），'seatching\u Plan\u Image\u canvas'，'0,0,0,0'，'0.0'，'0,0,0）；}，2000）；
返回；
}

如何调整计时器或将两个函数合并为一个函数，并在另一个函数之后执行一个“设置间隔”

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

任何帮助都将不胜感激

谢谢

---

Aj

每次将鼠标悬停在图像上时，都会启动一个新的

setInterval

，因为您的

clearInterval（）

命令实际上什么都没有做。您在hover函数中定义了保存

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

事件来停止间隔，因为现在即使鼠标不再悬停在元素上，它也会继续运行