jQuery setTimeout

Question

Tôi muốn thêm thời gian chờ vào mã công cụ này để nó chỉ hiển thị nếu chuột di chuột qua nó sau một thời gian thay vì ngay lập tức ... Tôi đã thử thêm setTimeout() nhưng tôi không thể tìm ra cách sử dụng clearTimeout() để chú giải công cụ không ẩn trên chuột. Bạn có thể giúp?

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).text(mcHoverText).show('fast'); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 

Tôi cố gắng này:

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     setTimeOut(function(){ 
      $(mcTooltip).text(mcHoverText).show('fast'); 
     }, 300); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 

Answer 1

Như bạn đang sử dụng hình ảnh động, bạn có thể sử dụng .delay() trì hoãn sự xuất hiện của tooltip của bạn:

$(mcTooltip).text(mcHoverText).delay(1000).show('fast'); 

Trong chức năng mouseout của bạn, sử dụng .stop để hủy bỏ bất kỳ sự chậm trễ hoặc hình ảnh động hiện có, và sau đó ẩn tooltip :

$(mcTooltip).stop(true).hide('fast'); 

Answer 2

Một lựa chọn là sử dụng các plugin hoverIntent để hoàn thành những gì bạn muốn.

Answer 3

1. Sử dụng hover() thay vào đó, nó ít mã (và đó là luôn luôn tốt, IMO).

Giống như vậy:

function mcToolTip() { 
    $(".mcTxb").hover(function(){ 
     // mouseover stuff here 
     $("element").delay(3000).show(); // 3 second delay, then show 
    }, function(){ 
     // mouseout stuff here 
    }); 
} 

Answer 4

var my_timer; 
$('.mcTxb').hover(
    function() { 
     my_timer = setTimeout(function() { 
      //do work here 
     }, 500); 
    }, 
    function() { 
     clearTimeout(my_timer); 
    } 
); 

này sẽ chờ đợi một nửa trước khi làm bất cứ điều gì khi bạn mouseover phần tử và bất cứ điều gì sẽ không xảy ra nếu bạn mouseout trong nửa cuối .

Answer 5

Câu hỏi này cũ, nhưng tôi nghĩ tôi trả lời câu hỏi này cho người khác. Lý do chính mà thời gian chờ không hoạt động là trường hợp "setTimeOut". Bạn không thể lạc đà bướu phần Out. "SetTimeout" của nó.

Answer 6

setTimeout không hoạt động khi di chuột qua hoặc di chuột. Nó là an toàn để sử dụng .delay().

setTimeout(function(){ 
    $(mcTooltip).text(mcHoverText).show('fast'); 
}, 300); 

// use this instead. 

$(mcTooltip).text(mcHoverText).delay(3000).show('fast');