Gecikme jquery üzerine gelme olayı?

Jquery'de bir fareyle üzerine gelme olayını ertelemek istiyorum. Kullanıcı bir bağlantının veya etiketin üzerine geldiğinde bir dosyadan okuyorum. Kullanıcının yalnızca fareyi ekranda hareket ettirmesi durumunda bu olayın hemen gerçekleşmesini istemiyorum. Olayın ateşlenmesini geciktirmenin bir yolu var mı?

Teşekkür ederim.

Örnek kod:

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

GÜNCELLEME: ( 1/14/09 ) HoverIntent eklentisini ekledikten sonra, onu uygulamak için yukarıdaki kod aşağıdaki gibi değiştirildi. Uygulaması çok basit.

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

Jquery için hoverIntent eklentisini kullanın: http://cherne.net/brian/resources/jquery.hoverIntent.html

Tanımladığınız şey için kesinlikle mükemmel ve menülerin fareyle üzerine gelindiğinde etkinleştirilmesini gerektiren hemen hemen her projede kullandım ...

Bu yaklaşımın bir anlamı var, bazı arayüzler 'gezinme' durumundan yoksundur, örn. iphone'da safari gibi mobil tarayıcılar. Arayüzün veya navigasyonun önemli bir bölümünü böyle bir cihazda açmanın hiçbir yolu olmadan gizliyor olabilirsiniz. Cihaza özel CSS ile bunu aşabilirsiniz.

Üzerine gelindiğinde bir zamanlayıcıyı kontrol etmeniz gerekir. Mevcut değilse (yani bu ilk fareyle üzerine gelme ise), onu oluşturun. Varsa (yani bu ilk fareyle üzerine gelme değilse ), onu öldürün ve yeniden başlatın. Zamanlayıcı yükünü kodunuza ayarlayı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
    });
});

Bahse girerim jQuery'nin tüm bunları sizin için tamamlayan bir işlevi vardır.

Düzenleme : Ah evet, jQuery eklentisi kurtarmaya

HoverIntent'in en iyi çözüm olduğuna kesinlikle katılıyorum, ancak jQuery eklentilerinin onaylanması için uzun ve uzun bir sürecin olduğu bir web sitesinde çalışan talihsiz bir herif iseniz, işte benim için iyi çalışan hızlı ve kirli bir çözüm:

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

Bu, yalnızca <li> üzerinde fare 300 ms'den daha uzun süredir duruyorsa genişletmek içindir.

Mouseout olayında clearTimeout () ile bir setTimeout () çağrısı kullanabilirsiniz.

2016'da Crescent Fresh'in çözümü benim için beklendiği gibi çalışmadı, bu yüzden şunu buldum:

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

Benim çözümüm kolay. Kullanıcı mouseenter'i 300 ms'den fazla nesnede tutuyorsa açık menüyü geciktir:

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