javascript resize sự kiện bắn nhiều lần trong khi kéo thay đổi kích cỡ xử lý

Question

Tôi đã hy vọng này jQuery plug-in sẽ làm việc, nhưng nó đã không được phép:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (liên kết cũ đã noteslog.com/post/how-to -fix-the-resize-event-in-ie).

Tôi đã thêm nhận xét vào trang web của anh ấy nhưng chúng được kiểm duyệt, vì vậy bạn có thể chưa thấy nhận xét đó.

Nhưng dù sao đi nữa, hãy để tôi giải thích mong muốn của tôi. Tôi muốn loại sự kiện "thay đổi kích thước" được kích hoạt khi người dùng tạm dừng thay đổi kích thước và/hoặc hoàn thành thay đổi kích thước của mình, không phải là trong khi người dùng đang chủ động kéo tay cầm thay đổi kích thước cửa sổ của trình duyệt. Tôi có một hàm OnResizeHandled khá phức tạp và tốn thời gian tôi cần phải chạy, nhưng không chạy 100 lần chỉ vì người dùng đã mở rộng cửa sổ lên 100px và sự kiện này đã được kích hoạt cho từng điểm ảnh chuyển động. Tôi đoán đặt cược tốt nhất là xử lý nó khi người dùng đã hoàn tất việc thay đổi kích thước.

Answer 1

Mượn một số ý tưởng từ các giải pháp đồng thời để quản lý lũ các sự kiện đến từ trình duyệt.

Ví dụ: khi bạn lần đầu tiên nhận được sự kiện thay đổi kích thước, hãy đặt cờ thành true cho biết người dùng hiện đang thay đổi kích thước. Đặt thời gian chờ để gọi trình xử lý sự kiện thay đổi kích thước thực tế sau 1 giây. Sau đó, bất cứ khi nào cờ này là đúng, bỏ qua sự kiện thay đổi kích thước. Sau đó, trong trình xử lý thực tế, sau khi mọi thứ được thực hiện và chính xác, hãy đặt cờ trở lại thành false.

Bằng cách đó bạn chỉ xử lý sự kiện mới nhất một lần mỗi giây (hoặc một khoảng thời gian khác tùy thuộc vào yêu cầu của bạn). Nếu người dùng tạm dừng ở giữa thay đổi kích thước, nó sẽ xử lý. Nếu người dùng kết thúc, nó sẽ xử lý.

Điều này có thể không phù hợp với bạn, nhưng có nhiều cách khác để sử dụng khóa có thể hữu ích hơn.

Answer 2

Cách đặt thời gian chờ khi người dùng tạm dừng thay đổi kích thước? Đặt lại thời gian chờ khi thay đổi kích thước xảy ra hoặc kích hoạt trình xử lý sự kiện thay đổi kích thước nếu hết thời gian chờ.

Answer 3

Vì nó được xây dựng trong jQuery, bạn có thể liên kết một số loại sự kiện onComplete với phần mở rộng và chuyển một hàm sẽ được thực thi khi nó được gọi không?

Chỉnh sửa:

Khi người dùng bắt đầu thay đổi kích thước cửa sổ, hãy đặt khoảng thời gian xem kích thước của cửa sổ. Nếu kích thước không thay đổi trong khoảng thời gian được đặt trước của đặc tả của bạn, thì bạn có thể xem xét việc thay đổi kích thước cửa sổ "hoàn thành". Chức năng javascript của bạn trong lựa chọn này sẽ là setInterval(), chấp nhận hai đối số - một hàm để gọi mỗi đánh dấu, và mỗi lần đánh dấu mất bao nhiêu mili giây.

Cách viết đặc biệt trong khung công tác jquery, tốt, tôi không biết đủ về jquery để có thể cho bạn biết điều đó. Có lẽ ai đó có thể giúp bạn cụ thể hơn, nhưng đồng thời bạn có thể xem xét việc mở rộng phần mở rộng jquery mà bạn đã liên kết với một sự kiện onComplete hoạt động như tôi vừa mô tả.

Answer 4

Làm thế nào về một số mã như thế này:

function resizeStuff() { 
//Time consuming resize stuff here 
} 
var TO = false; 
$(window).resize(function(){ 
if(TO !== false) 
    clearTimeout(TO); 
TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds 
}); 

Điều đó sẽ đảm bảo các chức năng thay đổi kích thước chỉ khi người dùng ngừng thay đổi kích thước.

Answer 5

Paul Irish có số lượng lớn Debounced jQuery plugin giải quyết vấn đề này.

Answer 6

Tôi đã mở rộng một số ngày trước, mặc định là jQuery on -quét xử lý. Nó đính kèm một hàm xử lý sự kiện cho một hoặc nhiều sự kiện vào các phần tử đã chọn nếu sự kiện không được kích hoạt trong một khoảng thời gian nhất định. Điều này rất hữu ích nếu bạn muốn kích hoạt một cuộc gọi lại chỉ sau một sự chậm trễ, như sự kiện thay đổi kích thước, hoặc khác. https://github.com/yckart/jquery.unevent.js

;(function ($) { 
    var methods = { on: $.fn.on, bind: $.fn.bind }; 
    $.each(methods, function(k){ 
     $.fn[k] = function() { 
      var args = [].slice.call(arguments), 
       delay = args.pop(), 
       fn = args.pop(), 
       timer; 

      args.push(function() { 
       var self = this, 
        arg = arguments; 
       clearTimeout(timer); 
       timer = setTimeout(function(){ 
        fn.apply(self, [].slice.call(arg)); 
       }, delay); 
      }); 

      return methods[k].apply(this, isNaN(delay) ? arguments : args); 
     }; 
    }); 
}(jQuery)); 

Sử dụng nó giống như bất kỳ on hoặc bind handler -event khác, ngoại trừ việc bạn có thể vượt qua một tham số phụ như một lần cuối:

$(window).on('resize', function(e) { 
    console.log(e.type + '-event was 200ms not triggered'); 
}, 200); 

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 7

Nếu bạn là thành thư viện , bạn nên kiểm tra gạch dưới, gạch dưới đã xử lý nhu cầu của bạn và nhiều hơn nữa bạn có thể sẽ có trong các dự án của bạn.

đây là một ví dụ về cách gạch debouncer hoạt động:

// declare Listener function 
var debouncerListener = _.debounce(function(e) { 

    // all the actions you need to happen when this event fires 

}, 300); // the amount of milliseconds that you want to wait before this function is called again 

sau đó chỉ cần gọi đó là chức năng debouncer trên thay đổi kích thước của cửa sổ

window.addEventListener("resize", debouncerListener, false); 

kiểm tra tất cả các chức năng gạch có sẵn ở đây http://underscorejs.org/