ล่าช้า jquery hover เหตุการณ์?

ฉันต้องการเลื่อนเหตุการณ์ที่เลื่อนใน jquery ฉันกำลังอ่านจากไฟล์เมื่อผู้ใช้วางเมาส์เหนือลิงก์หรือป้ายกำกับ ฉันไม่ต้องการให้เหตุการณ์นี้เกิดขึ้นทันทีในกรณีที่ผู้ใช้เพียงแค่เลื่อนเมาส์ผ่านหน้าจอ มีวิธีชะลอไม่ให้เหตุการณ์เกิดขึ้นหรือไม่?

ขอขอบคุณ.

รหัสตัวอย่าง:

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

อัปเดต: (1/14/09) หลังจากเพิ่มปลั๊กอิน HoverIntent โค้ดด้านบนถูกเปลี่ยนเป็นโค้ดต่อไปนี้เพื่อใช้งาน ใช้งานง่ายมาก

$(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)
}

ใช้ปลั๊กอิน hoverIntent สำหรับ jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

มันสมบูรณ์แบบมากสำหรับสิ่งที่คุณอธิบายและฉันเคยใช้มันในเกือบทุกโครงการที่ต้องเปิดใช้งานเมนูเมาส์โอเวอร์ ฯลฯ ...

มี gotcha หนึ่งสำหรับแนวทางนี้อินเทอร์เฟซบางตัวไม่มีสถานะ 'โฮเวอร์' เช่น เบราว์เซอร์มือถือเช่นซาฟารีบน iPhone คุณอาจซ่อนส่วนสำคัญของอินเทอร์เฟซหรือการนำทางโดยไม่สามารถเปิดได้ในอุปกรณ์ดังกล่าว คุณสามารถหลีกเลี่ยงสิ่งนี้ได้ด้วย CSS เฉพาะอุปกรณ์

คุณต้องตรวจสอบตัวจับเวลาเมื่อวางเมาส์เหนือ หากไม่มีอยู่ (เช่นนี่คือโฮเวอร์แรก) ให้สร้างขึ้น หากมีอยู่ (เช่นนี่ไม่ใช่การวางเมาส์ครั้งแรก) ให้ฆ่ามันและเริ่มต้นใหม่ ตั้งค่า payload ของตัวจับเวลาเป็นรหัสของคุณ

$(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
    });
});

ฉันพนันได้เลยว่า jQuery มีฟังก์ชั่นที่ครอบคลุมทั้งหมดนี้สำหรับคุณ

แก้ไข : ใช่ปลั๊กอิน jQuery เพื่อช่วยเหลือ

ยอมรับโดยสิ้นเชิงว่า hoverIntent เป็นทางออกที่ดีที่สุด แต่ถ้าคุณบังเอิญเป็นผู้โชคร้ายที่ทำงานบนเว็บไซต์ที่มีขั้นตอนที่ยาวนานและยืดเยื้อสำหรับการอนุมัติปลั๊กอิน jQuery นี่เป็นวิธีแก้ปัญหาที่รวดเร็วและสกปรกซึ่งทำงานได้ดีสำหรับฉัน:

$('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);
    }
});

อันนี้ใช้สำหรับขยาย <li> หากเมาส์อยู่นานกว่า 300 มิลลิวินาที

คุณสามารถใช้การโทร setTimeout () กับ clearTimeout () ในเหตุการณ์ mouseout

ในปี 2559 วิธีแก้ปัญหาของ Crescent Fresh ไม่ได้ผลตามที่คาดไว้สำหรับฉันดังนั้นฉันจึงคิดสิ่งนี้:

$(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;
});

วิธีแก้ปัญหาของฉันเป็นเรื่องง่าย เลื่อนเมนูเปิดหากผู้ใช้ให้เมาส์อยู่บน obj เกิน 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);
});