jquery hover 이벤트를 지연 하시겠습니까?

jquery에서 hover 이벤트를 지연하고 싶습니다. 사용자가 링크 또는 레이블 위로 마우스를 가져 가면 파일에서 읽는 중입니다. 사용자가 화면에서 마우스를 움직 이기만하는 경우이 이벤트가 즉시 발생하는 것을 원하지 않습니다. 이벤트 발생을 지연시킬 수있는 방법이 있습니까?

감사합니다.

예제 코드 :

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

업데이트 : (2009 년 1 월 14 일) 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)
}

jquery에 hoverIntent 플러그인 사용 : http://cherne.net/brian/resources/jquery.hoverIntent.html

그것은 당신이 설명하는 것에 절대적으로 완벽하며 메뉴 등의 마우스 오버 활성화가 필요한 거의 모든 프로젝트에서 사용했습니다.

이 접근 방식에는 한 가지 문제가 있습니다. 일부 인터페이스에는 'hover'상태가 없습니다. 아이폰의 사파리와 같은 모바일 브라우저. 그러한 장치에서 열 방법이없는 인터페이스 또는 탐색의 중요한 부분을 숨기고있을 수 있습니다. 장치 별 CSS로이 문제를 해결할 수 있습니다.

마우스 오버시 타이머를 확인해야합니다. 존재하지 않는 경우 (즉, 이것이 첫 번째 호버 임) 생성합니다. 존재하는 경우 (즉, 이것이 첫 번째 호버 가 아님 ) 종료하고 다시 시작하십시오. 코드에 타이머 페이로드를 설정합니다.

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

이것은 마우스가 300ms 이상 위에있는 경우 <li>를 확장하기위한 것입니다.

mouseout 이벤트에서 clearTimeout ()과 함께 setTimeout () 호출을 사용할 수 있습니다.

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

내 솔루션은 쉽습니다. 사용자가 300ms 이상 obj에 mouseenter를 유지하는 경우 메뉴 열기 지연 :

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