JQuery: Làm thế nào để gọi sự kiện RESIZE chỉ khi nó HOÀN TẤT thay đổi kích thước?

Làm cách nào để gọi một hàm sau khi cửa sổ trình duyệt đã HOÀN TẤT thay đổi kích thước?

Tôi đang cố gắng làm như vậy, nhưng gặp sự cố. Tôi đang sử dụng hàm sự kiện JQuery Resize:

$(window).resize(function() {
  ... // how to call only once the browser has FINISHED resizing?
});

Tuy nhiên, chức năng này được gọi liên tục nếu người dùng đang thay đổi kích thước cửa sổ trình duyệt theo cách thủ công. Có nghĩa là, nó có thể gọi hàm này hàng chục lần trong khoảng thời gian ngắn.

Làm thế nào tôi có thể gọi chức năng thay đổi kích thước chỉ một lần (sau khi cửa sổ trình duyệt đã hoàn thành việc thay đổi kích thước)?

CẬP NHẬT

Ngoài ra mà không cần phải sử dụng một biến toàn cục.

Đây là một ví dụ sử dụng hướng dẫn của thejh

Bạn có thể lưu trữ một id tham chiếu cho bất kỳ setInterval hoặc setTimeout nào. Như thế này:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Debounce .

function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}


$( window ).resize( debouncer( function ( e ) {
    // do stuff 
} ) );

Lưu ý, bạn có thể sử dụng phương pháp này cho bất kỳ thứ gì bạn muốn xóa (sự kiện chính, v.v.).

Tinh chỉnh thông số thời gian chờ để có hiệu ứng mong muốn tối ưu.

Bạn có thể sử dụng setTimeout()và clearTimeout()kết hợp với jQuery.data:

$(window).resize(function() {
    clearTimeout($.data(this, 'resizeTimer'));
    $.data(this, 'resizeTimer', setTimeout(function() {
        //do something
        alert("Haven't resized in 200ms!");
    }, 200));
});

Cập nhật

Tôi đã viết một tiện ích mở rộng để nâng cao trình xử lý mặc định on(& bind) -event- của jQuery . 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 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 khoảng thời gian trễ, chẳng hạn như sự kiện thay đổi kích thước hoặc các trường hợp 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ỳ trình xử lý onhoặc bind-event nào khác , ngoại trừ việc bạn có thể chuyển một tham số bổ sung vào cuối cùng:

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

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

var lightbox_resize = false;
$(window).resize(function() {
    console.log(true);
    if (lightbox_resize)
        clearTimeout(lightbox_resize);
    lightbox_resize = setTimeout(function() {
        console.log('resize');
    }, 500);
});

Chỉ để thêm vào những điều trên, thường xảy ra các sự kiện thay đổi kích thước không mong muốn do các thanh cuộn bật ra và bật ra, đây là một số mã để tránh điều đó:

function registerResize(f) {
    $(window).resize(function() {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(function() {
            var oldOverflow = document.body.style.overflow;
            document.body.style.overflow = "hidden";
            var currHeight = $(window).height(),
                currWidth = $(window).width();
            document.body.style.overflow = oldOverflow;

            var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
            if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
                //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
                this.prevHeight = currHeight;
                this.prevWidth = currWidth;

                f(currHeight, currWidth);
            }
        }, 200);
    });
    $(window).resize(); // initialize
}

registerResize(function(height, width) {
    // this will be called only once per resize regardless of scrollbars changes
});

xem jsfiddle

Underscore.js có một số phương pháp tuyệt vời cho tác vụ này: throttlevà debounce. Ngay cả khi bạn không sử dụng Dấu gạch dưới, hãy xem nguồn của các hàm này. Đây là một ví dụ:

var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);

Đây là cách tiếp cận của tôi:

document.addEventListener('DOMContentLoaded', function(){
    var tos = {};
    var idi = 0;
    var fn  = function(id)
    {
        var len = Object.keys(tos).length;

        if(len == 0)
            return;

        to = tos[id];
        delete tos[id];

        if(len-1 == 0)
            console.log('Resize finished trigger');
    };

    window.addEventListener('resize', function(){
        idi++;
        var id = 'id-'+idi;
        tos[id] = window.setTimeout(function(){fn(id)}, 500);
    });
});

Trình nghe thay đổi kích thước-sự kiện bắt tất cả các lệnh gọi thay đổi kích thước đến, tạo một hàm thời gian chờ cho mỗi lệnh và lưu mã định danh thời gian chờ cùng với một số lặp được thêm vào trước 'id-'(có thể sử dụng làm khóa mảng) trong-mảng tos.

mỗi lần, timout kích hoạt, nó gọi -function, sẽ fnkiểm tra, nếu đó là lần hết thời gian cuối cùng trong tosmảng (fn-function sẽ xóa mọi timout được thực thi). nếu true (= if(len-1 == 0)), quá trình thay đổi kích thước đã hoàn tất.

jQuery cung cấp một offphương thức để loại bỏ trình xử lý sự kiện

$(window).resize(function(){
    if(magic == true) {
        $(window).off('resize', arguments.callee);
    }
});