javascript - 延迟 onmouseover javascript

Question

我对大多数网络开发的东西都是新手，所以我恳请您提供一些支持。我有一个图像映射，其中我在一个单独的 div 中分配了几个触发不同内容的区域。我现在想为 onmouseover 触发器添加延迟，以便仅当用户将光标放在该区域上而不是不小心悬停在该区域上时，div 中的内容才会更新。

这是我用来切换 div 内容的 js:

function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}

function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
    oShowHideDivs[i].style.display = 'none';
}
}

window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover=function(){
        showHideDivs(this.indx);
    }
  }
}

那么我该如何实现延迟以及在何处实现？提前谢谢!简

编辑: 我现在使用这种方法:

oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}

对我来说似乎是最简单的。谢谢提示!

Answer 1

最简单的方法是在鼠标悬停时加入超时，并在鼠标移出时清除它。

oMap.areas[i].onmouseover=function(){
    var area=this;
    var delay=setTimeout(function(){showHideDivs(area.indx);},100);
    area.onmouseout=function(){clearTimeout(delay);};
}

对于更复杂的场景，使用类似 hoverintent 的插件.