Trì hoãn sự kiện di chuột qua jquery?

Tôi muốn trì hoãn sự kiện di chuột trong jquery. Tôi đang đọc từ một tệp khi người dùng di chuột qua một liên kết hoặc nhãn. Tôi không muốn sự kiện này xảy ra ngay lập tức trong trường hợp người dùng chỉ di chuyển chuột trên màn hình. Có cách nào để trì hoãn sự kiện kích hoạt không?

Cảm ơn bạn.

Mã ví dụ:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

CẬP NHẬT: (14/01/09) Sau khi thêm plugin HoverIntent, đoạn mã trên đã được thay đổi thành như sau để triển khai nó. Rất đơn giản để thực hiện.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Sử dụng plugin hoverIntent cho jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Nó hoàn toàn hoàn hảo cho những gì bạn mô tả và tôi đã sử dụng nó trên gần như mọi dự án yêu cầu kích hoạt di chuột qua các menu, v.v.

Có một điểm cần lưu ý đối với cách tiếp cận này, một số giao diện không có trạng thái 'di chuột', ví dụ. trình duyệt di động như safari trên iPhone. Bạn có thể đang ẩn một phần quan trọng của giao diện hoặc điều hướng mà không có cách nào để mở nó trên một thiết bị như vậy. Bạn có thể giải quyết vấn đề này bằng CSS dành riêng cho thiết bị.

Bạn cần kiểm tra bộ hẹn giờ khi di chuột. Nếu nó không tồn tại (tức là đây là lần di chuột đầu tiên), hãy tạo nó. Nếu nó tồn tại (tức là đây không phải là lần di chuột đầu tiên), hãy giết nó và khởi động lại nó. Đặt trọng tải bộ đếm thời gian thành mã của bạn.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Tôi cá rằng jQuery có một chức năng giúp bạn giải quyết vấn đề này.

Chỉnh sửa : À vâng, plugin jQuery giải cứu

Hoàn toàn đồng ý rằng hoverIntent là giải pháp tốt nhất, nhưng nếu bạn không may làm việc trên một trang web với một quy trình dài và kéo dài để phê duyệt các plugin jQuery, thì đây là một giải pháp nhanh chóng và hiệu quả đối với tôi:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Cái này chỉ để mở rộng <li> nếu chuột đã ở trên đó lâu hơn 300ms.

Bạn có thể sử dụng lệnh gọi setTimeout () với clearTimeout () trong sự kiện mouseout.

Vào năm 2016, giải pháp của Crescent Fresh không hoạt động như mong đợi đối với tôi, vì vậy tôi đã nghĩ ra điều này:

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

Giải pháp của tôi là dễ dàng. Trì hoãn mở menu nếu người dùng giữ con trỏ chuột trên đối tượng hơn 300ms:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});