window.resize trong jquery bắn nhiều lần

Tôi có đoạn code javascript/jquery sau trong một tập tin HTML:window.resize trong jquery bắn nhiều lần

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
    type="text/javascript"></script> 
    <script language="javascript"> 
    $(window).resize(function(){alert('hi');});</script> 
    </head> 
    <body> 
    resize me 
    </body> 
</html>

Nó xuất hiện tương đối thẳng về phía trước, tuy nhiên khi tôi lại kích thước cửa sổ trình duyệt, tôi nhận được hai liên tiếp cửa sổ cảnh báo trên Chrome và IE9 và tôi dường như gặp sự cố FF5.

Tôi đang thiếu gì? Là một ngọn lửa cho mỗi kích thước (x/y)?

Nguồn

2011-07-12 Matt

Nó sẽ bắn nhiều lần khi bạn kéo để thay đổi kích thước. –

Vâng, tôi chỉ cần nhấp vào nút khôi phục tối đa trong cửa sổ xử lý. Nó cũng bị bắn hai lần vào thời điểm đó. – Matt

Nếu bạn muốn tránh điều này, hãy xem plugin này: http://benalman.com/projects/jquery-throttle-debounce-plugin/ –

Bạn đã biết, một số trình duyệt kích hoạt thay đổi kích cỡ bắt đầu và một lần nữa khi kết thúc trong khi những người khác như FF cháy liên tục. Giải pháp là sử dụng setTimeout để tránh kích hoạt mọi lúc. Một ví dụ có thể được tìm thấy here. Đây là mã từ cùng một tham chiếu:

(function($,sr){ 

    // debouncing function from John Hann 
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 

     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
       if (!execAsap) 
        func.apply(obj, args); 
       timeout = null; 
      }; 

      if (timeout) 
       clearTimeout(timeout); 
      else if (execAsap) 
       func.apply(obj, args); 

      timeout = setTimeout(delayed, threshold || 100); 
     }; 
    } 
    // smartresize 
    jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 

})(jQuery,'smartresize'); 


// usage: 
$(window).smartresize(function(){ 
    // code that takes it easy... 
});

Nguồn

2011-07-12 01:18:54 Radu

Cảm ơn câu trả lời này đã giúp giải quyết vấn đề của tôi: http://stackoverflow.com/ câu hỏi/13710834/vấn đề-với-mobiscroll-orientationchange-và-truy cập-địa chỉ-bar-tai nạn-một số/13767875 # 13767875 – Soenhay

Làm cách nào chúng tôi có thể hủy liên kết sự kiện này? – Ninjaneer

Có vẻ như đây là một trình duyệt riêng biệt. Theo tài liệu hướng dẫn cho sự kiện resize:

Mã trong một handler thay đổi kích thước không bao giờ nên dựa vào số lần xử lý được gọi. Tùy thuộc vào việc thực hiện, thay đổi kích thước sự kiện có thể được gửi liên tục khi đang thay đổi kích thước (hành vi điển hình trong trình duyệt Internet Explorer và WebKit như Safari và Chrome) hoặc chỉ một lần ở cuối hoạt động thay đổi kích thước (hành vi điển hình trong một số trình duyệt khác như Opera).

(tôi nhấn mạnh)

Một cách giải quyết sẽ là để thiết lập một bộ đếm thời gian và kiểm tra xem nếu kích thước của cửa sổ đã thay đổi.

Nguồn

2011-07-12 01:20:08

Trình duyệt không kích hoạt sự kiện đổi kích thước một cách nhất quán. Để tránh nó bắn liên tục, thường là một setTimeout được sử dụng. Dưới đây là một số chi tiết trên rằng:

JQuery: How to call RESIZE event only once it's FINISHED resizing?

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Nguồn

2011-07-12 01:23:38 DSKrepps

đây là một ví dụ đơn giản, nếu người dùng ngừng thay đổi kích thước cho 500ms (một nửa), bạn có chức năng sẽ cháy. hàm clearTimeout ngăn không cho hàm refire của bạn liên tục. bạn có thể điều chỉnh giá trị này khi bạn thấy phù hợp. 500ms có thể quá sớm, bạn có thể bị lỗi đến 1000, phụ thuộc vào những gì bạn đang làm bên trong hàm

var resizeTimeout; 
$(window).resize(function(){ 
    clearTimeout(resizeTimeout); 
    resizeTimeout = setTimeout(function(){  
     alert('your function to run on resize'); 
    }, 500); 
});

Nguồn

2011-07-12 02:29:43

window.resize trong jquery bắn nhiều lần

Trả lời

Các vấn đề liên quan