hover事件延迟处理方法

先来说说项目中遇到的问题.

1.png

这里用的是bootstrap的框架，框架内tab切换是点击切换，但是需求换成鼠标滑过切换，点击进入全部列表。这里稍微修改下脚本。

    //  鼠标滑过tab切换
    $(".widget-infoMode").each(function () {
        var item = $(this).children(".nav-tabs").find("li");
        $(item).mouseover(function () {
            var _this = $(this).index();                $(item).eq(_this).find("a").stop(true,true).tab("show");
        });
        //  点击tab切换详情页
        $(item).on("click", function () {
            var href = $(this).find("a").attr("href");
            if(href !== null || href !== undefined || href !== ''){
                window.open(href);
            }
        })
    });

这里就会有问题，经常会碰到两个列表tab页在同一个页面展示的情况。

原因是hover绑定事件干扰，这里就需要对hover事件进行延时处理。
修改后的代码如下：

//  鼠标滑过tab切换
$(".widget-infoMode").each(function () {
    var hoverTimer;
    var item = $(this).children(".nav-tabs").find("li");
    $(item).hover(function () {
        var _this = $(this).index();
        hoverTimer = window.setTimeout(function(){
            console.log(_this);
            $(item).eq(_this).find("a").stop(true,true).tab("show");
        },200);
    }, function () {
        clearTimeout(hoverTimer);
    });
    //  点击tab切换详情页
    $(item).on("click", function () {
        var href = $(this).find("a").attr("href");
        if(href !== null || href !== undefined || href !== ''){
            window.open(href);
        }
    })
});     

重点就是js的setTimeout方法，设置事件，延时触发函数，避免用户不经意的触发切换事件。