Sự kiện di chuột jquery trễ?

Question

Tôi muốn trì hoãn sự kiện di chuột trong jquery. Tôi đang đọc từ một tệp khi người dùng di chuột qua liên kết hoặc nhãn. Tôi không muốn sự kiện này xảy ra ngay lập tức trong trường hợp người dùng chỉ di chuyển chuột qua màn hình. Có cách nào để trì hoãn sự kiện này không?

Cảm ơn bạn.

Ví dụ mã:

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

UPDATE:(1/14/09) Sau khi thêm HoverIntent cắm các mã trên đã được đổi thành phần sau đây để thực hiện nó. Rất đơn giản để thực hiện.

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

Answer 1

Sử dụng các plugin hoverIntent cho jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Đó là hoàn toàn hoàn hảo cho những gì bạn mô tả và tôi đã sử dụng nó trên hầu hết các dự án mà yêu cầu kích hoạt mouseover của menu vv ...

Có một trong những gotcha để tiếp cận này, một số giao diện là không có một 'hover' nhà nước ví dụ. các trình duyệt di động như safari trên iphone. Bạn có thể ẩn một phần quan trọng của giao diện hoặc điều hướng mà không có cách nào để mở nó trên một thiết bị như vậy. Bạn có thể làm tròn điều này với CSS cụ thể của thiết bị.

Answer 2

Bạn có thể sử dụng lệnh setTimeout() với hàm clearTimeout() trong sự kiện di chuột.

Answer 3

Bạn cần kiểm tra bộ hẹn giờ khi di chuột. Nếu nó không tồn tại (tức là đây là di chuột đầu tiên), hãy tạo nó. Nếu nó tồn tại (tức là đây là không phải là di chuột đầu tiên), hãy xóa nó và khởi động lại nó. Đặt tải trọng hẹn giờ thành mã của bạ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 
    }); 
}); 

Tôi đặt cược jQuery có chức năng kết thúc tốt đẹp cho bạn.

Sửa: Ah vâng, jQuery plugin to the rescue

Answer 4

Giải pháp của tôi là dễ dàng. Trì hoãn đơn mở nếu người dùng giữ mouseenter trên obj trên 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); 
}); 

Answer 5

Hoàn toàn đồng ý rằng hoverIntent sự là giải pháp tốt nhất, nhưng nếu bạn tình cờ trở thành một cỏ may người làm việc trên một trang web với một quá trình dài và kéo dài chính plugin jQuery, đây là một giải pháp nhanh chóng và dơ bẩn mà làm việc tốt cho tôi:

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

Cái này chỉ là để mở rộng một <li> nếu chuột đã trên nó lâu hơn 300ms.

Answer 6

Trong năm 2016 giải pháp Crescent tươi đã không làm việc như mong đợi đối với tôi, vì vậy tôi đã đưa ra với điều này:

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