关于前端js鼠标悬停超过某个时间才执行的问题

今天公司有个新需求，当鼠标悬停在标签上面超过一秒则显示标签的详情。刚开始在网上看到的都基本上是设置一个定时器，但是这种方法是不管悬停有没有满足这个时间，都会执行下面的方法，只是延后执行。和需求的效果有出入。直到看到一篇文章提供的思路才解决。

思路的主要点就是，设置一个全局变量，当没有悬停够这个时间则把定时器清除。

只要代码如下：

var t;
function mouseIn(obj) {
    t=setTimeout(function(){
        showRuleDetail(obj);
    }, 1000);
}

function mouseOut(obj) {
    clearTimeout(t);
    hideRuleDetail(obj);
}

function showRuleDetail(obj) {
    var hiddenSpanText = obj.parentElement.children[1].innerText;
    $("#changeText")[0].innerText= hiddenSpanText;
}

function hideRuleDetail(obj) {
    $("#changeText")[0].innerText="";
}