jQuery延时绑定事件(lazy-bind)

最新推荐文章于 2024-06-12 09:54:53 发布

原创最新推荐文章于 2024-06-12 09:54:53 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #timer #null

jquery 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个自定义的jQuery插件，用于实现延时绑定事件功能，以解决鼠标滑动屏幕时浮动层频繁闪烁的问题。通过定义一个懒加载绑定事件的方法，可以确保在指定延迟后执行绑定操作，提高用户体验。

有个延时绑定事件的需求, 如等待鼠标停留在某图片上面一段时间之后才展示浮动层, 以避免鼠标滑过屏幕时一片乱闪. 一时找不到合适的插件, 所以自己写了个.

// 定义
(function($){
    $.fn.lazybind = function(event, fn, timeout, abort){
        var timer = null;
        $(this).bind(event, function(){
            timer = setTimeout(fn, timeout);
        });
        if(abort == undefined){
            return;
        }
        $(this).bind(abort, function(){
            if(timer != null){
                clearTimeout(timer);
            }
        });
    };
})(jQuery);

// 使用
$('#my_img').lazybind(
    'mouseover',
    function(){
        alert(1);
    },
    240,
    'mouseout');