jQuery 대화 상자를 표시하기 전에 기다리는 방법?

Question

사용자가 이미지 위에 마우스를 올리면 정확히 3 초 후에 jQuery 대화 상자를 표시하고 싶습니다. 현재 내가 가지고있는 것 :

$(".imgLi").live('hover', function() { 
    showDialog(); 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div> 

여기에 jQuery의 타이머 객체를 구현하는 방법이나 타임 코드를 어디에 두어야하는지 잘 모르겠습니다. 3 초 시간대의 어떤 시점에서 마우스를 이미지 위에 놓고 마우스를 움직이면, 대화 상자를 표시하지 않습니다. 어떤 도움을 주셔서 미리 감사드립니다. 당신은 3 초 후 대화 상자를 표시 할 수 있습니다 http://jsfiddle.net/weCpE/

Answer 1

미안 해요로 마우스에 대한 사항 clearTimeout 추가 마우스를 올리면 사용자가 3 초 전에 마우스를 놓으면이 유형의 코드를 사용하여 표시되지 않습니다.

모든 버전의 jQuery에서 .live()이 사용되지 않으므로 코드를 .on()으로 마이그레이션했습니다. 더 나은 성능을 위해이 코드의 document을 ".imgLi" 개체에 가까운 정적 부모 요소로 바꿔야합니다.

var dialogTimer = null; 
$(document).on('mouseenter', ".imgLi", function() { 
    if (!dialogTimer) { 
     dialogTimer = setTimeout(function() { 
      dialogTimer = null; 
      showDialog(); 
     }, 3000); 
    } 
}).on('mouseleave', ".imgLi", function() { 
    if (dialogTimer) { 
     clearTimeout(dialogTimer); 
     dialogTimer = null; 
    } 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div> 

Answer 2

$(".imgLi").live({ 
     mouseenter: 
      function() 
      { 
       window.myTimeout = setTimeout(showDialog,3000); 
      }, 
     mouseleave: 
      function() 
      { 
       clearTimeout(window.myTimeout); 
      } 
     } 
    ); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

간단한 jsfiddle을 멀리 마이스 경우 실행해서는 안

Answer 3

: 사용자가

$(document).on('mouseenter', ".imgLi", function() { 
    var t=setTimeout("showDialog()",3000); 
}).on('mouseleave', ".imgLi", function() { 
    clearTimeout(t); 
}); 

function showDialog() 
{ 
    $('#imageDialogDiv').dialog({ 
     modal:true 
    }); 
} 

<div id="imageDialogDiv" title="Blah">...</div> 

Answer 4

나는 우수한 결과와 브라이언 Cherne에서 HoverIntent 플러그인을 사용했습니다 - 당신은 쉽게 당신이 원하는 정확한 지연을 구성 할 수 있습니다. .live (this question 참조)과 함께 작동하지 않는다고 생각합니다.