JavaScript / JQuery: $ (window) .resize, как запустить ПОСЛЕ изменения размера?

Question

Я использую JQuery как таковой:

$(window).resize(function() { ... });

Однако, похоже, что если человек вручную изменяет размеры своих окон браузера, перетаскивая край окна, чтобы сделать его больше / меньше, событие .resize выше запускается несколько раз.

Вопрос: Как вызвать функцию ПОСЛЕ завершения изменения размера окна браузера (чтобы событие запускалось только один раз)?

Answer 1

Вот модификация решения CMS, которая может быть вызвана в нескольких местах в вашем коде:

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

Использование:

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

Решение CMS подходит, если вы звоните только один раз, но если вы звоните несколько раз, например, если разные части вашего кода устанавливают отдельные обратные вызовы для изменения размера окна, то произойдет сбой, поскольку они совместно используют переменную timer.

В этой модификации вы предоставляете уникальный идентификатор для каждого обратного вызова, и эти уникальные идентификаторы используются для разделения всех событий тайм-аута.

Answer 2

Я предпочитаю создать событие:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Вот как вы его создаете:

 $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

Это может быть где-то в глобальном файле JavaScript.

Answer 3

Я использую следующую функцию для отсрочки повторных действий, она будет работать для вашего случая:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Использование:

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

Функция обратного вызова, переданная ей, будет выполняться только тогда, когда будет сделан последний вызов delay по истечении указанного промежутка времени, в противном случае таймер будет сброшен, я считаю это полезным для других целей, таких как обнаружение, когда пользователь прекратил ввод и т.д ...

Answer 4

Если у вас установлен Underscore.js, вы можете:

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

Answer 5

Некоторые из ранее упомянутых решений не работали для меня, хотя они имеют более общее использование. В качестве альтернативы я нашел этот , который выполнил работу по изменению размера окна:

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});

Answer 6

Большое спасибо Дэвиду Уолшу, вот ванильная версия откровения о подчеркивании.

Код:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Простое использование:

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

$(window).on('resize', myEfficientFn);

Ссылка: http://davidwalsh.name/javascript-debounce-function

Answer 7

На самом деле, как я знаю, вы не можете выполнять некоторые действия точно, когда изменение размера выключено, просто потому, что вы не знаете действий будущего пользователя. Но вы можете предположить, что прошло время между двумя событиями изменения размера, поэтому, если вы ждете немного больше, чем это время, и изменение не производится, вы можете вызвать свою функцию.
Идея в том, что мы используем setTimeout и его идентификатор, чтобы сохранить или удалить его. Например, мы знаем, что время между двумя событиями изменения размера составляет 500 мс, поэтому мы будем ждать 750 мс.

var a;
$(window).resize(function(){
  clearTimeout(a);
  a = setTimeout(function(){
    // call your function
  },750);
});

Answer 8

Объявить глобально задержанного слушателя:

var resize_timeout;

$(window).on('resize orientationchange', function(){
    clearTimeout(resize_timeout);

    resize_timeout = setTimeout(function(){
        $(window).trigger('resized');
    }, 250);
});

И ниже используйте слушателей для resized события, как вы хотите:

$(window).on('resized', function(){
    console.log('resized');
});

Answer 9

Простой плагин jQuery для отложенного изменения размера окна.

СИНТАКСИС:

Добавить новую функцию для изменения размера события

jQuery(window).resizeDelayed( func, delay, id ); // delay and id are optional

Удалить функцию (объявив ее идентификатор), добавленную ранее

jQuery(window).resizeDelayed( false, id );

Удалить все функции

jQuery(window).resizeDelayed( false );

ИСПОЛЬЗОВАНИЕ:

// ADD SOME FUNCTIONS TO RESIZE EVENT
jQuery(window).resizeDelayed( function(){ console.log( 'first event - should run after 0.4 seconds'); }, 400,  'id-first-event' );
jQuery(window).resizeDelayed( function(){ console.log('second event - should run after 1.5 seconds'); }, 1500, 'id-second-event' );
jQuery(window).resizeDelayed( function(){ console.log( 'third event - should run after 3.0 seconds'); }, 3000, 'id-third-event' );

// LETS DELETE THE SECOND ONE
jQuery(window).resizeDelayed( false, 'id-second-event' );

// LETS ADD ONE WITH AUTOGENERATED ID(THIS COULDNT BE DELETED LATER) AND DEFAULT TIMEOUT (500ms)
jQuery(window).resizeDelayed( function(){ console.log('newest event - should run after 0.5 second'); } );

// LETS CALL RESIZE EVENT MANUALLY MULTIPLE TIMES (OR YOU CAN RESIZE YOUR BROWSER WINDOW) TO SEE WHAT WILL HAPPEN
jQuery(window).resize().resize().resize().resize().resize().resize().resize();

ВЫХОД ИСПОЛЬЗОВАНИЯ:

first event - should run after 0.4 seconds
newest event - should run after 0.5 second
third event - should run after 3.0 seconds

PLUGIN:

jQuery.fn.resizeDelayed = (function(){

    // >>> THIS PART RUNS ONLY ONCE - RIGHT NOW

    var rd_funcs = [], rd_counter = 1, foreachResizeFunction = function( func ){ for( var index in rd_funcs ) { func(index); } };

    // REGISTER JQUERY RESIZE EVENT HANDLER
    jQuery(window).resize(function() {

        // SET/RESET TIMEOUT ON EACH REGISTERED FUNCTION
        foreachResizeFunction(function(index){

            // IF THIS FUNCTION IS MANUALLY DISABLED ( by calling jQuery(window).resizeDelayed(false, 'id') ),
            // THEN JUST CONTINUE TO NEXT ONE
            if( rd_funcs[index] === false )
                return; // CONTINUE;

            // IF setTimeout IS ALREADY SET, THAT MEANS THAT WE SHOULD RESET IT BECAUSE ITS CALLED BEFORE DURATION TIME EXPIRES
            if( rd_funcs[index].timeout !== false )
                clearTimeout( rd_funcs[index].timeout );

            // SET NEW TIMEOUT BY RESPECTING DURATION TIME
            rd_funcs[index].timeout = setTimeout( rd_funcs[index].func, rd_funcs[index].delay );

        });

    });

    // <<< THIS PART RUNS ONLY ONCE - RIGHT NOW

    // RETURN THE FUNCTION WHICH JQUERY SHOULD USE WHEN jQuery(window).resizeDelayed(...) IS CALLED
    return function( func_or_false, delay_or_id, id ){

        // FIRST PARAM SHOULD BE SET!
        if( typeof func_or_false == "undefined" ){

            console.log( 'jQuery(window).resizeDelayed(...) REQUIRES AT LEAST 1 PARAMETER!' );
            return this; // RETURN JQUERY OBJECT

        }

        // SHOULD WE DELETE THE EXISTING FUNCTION(S) INSTEAD OF CREATING A NEW ONE?
        if( func_or_false == false ){

            // DELETE ALL REGISTERED FUNCTIONS?
            if( typeof delay_or_id == "undefined" ){

                // CLEAR ALL setTimeout's FIRST
                foreachResizeFunction(function(index){

                    if( typeof rd_funcs[index] != "undefined" && rd_funcs[index].timeout !== false )
                        clearTimeout( rd_funcs[index].timeout );

                });

                rd_funcs = [];

                return this; // RETURN JQUERY OBJECT

            }
            // DELETE ONLY THE FUNCTION WITH SPECIFIC ID?
            else if( typeof rd_funcs[delay_or_id] != "undefined" ){

                // CLEAR setTimeout FIRST
                if( rd_funcs[delay_or_id].timeout !== false )
                    clearTimeout( rd_funcs[delay_or_id].timeout );

                rd_funcs[delay_or_id] = false;

                return this; // RETURN JQUERY OBJECT

            }

        }

        // NOW, FIRST PARAM MUST BE THE FUNCTION
        if( typeof func_or_false != "function" )
            return this; // RETURN JQUERY OBJECT

        // SET THE DEFAULT DELAY TIME IF ITS NOT ALREADY SET
        if( typeof delay_or_id == "undefined" || isNaN(delay_or_id) )
            delay_or_id = 500;

        // SET THE DEFAULT ID IF ITS NOT ALREADY SET
        if( typeof id == "undefined" )
            id = rd_counter;

        // ADD NEW FUNCTION TO RESIZE EVENT
        rd_funcs[id] = {
            func : func_or_false,
            delay: delay_or_id,
            timeout : false
        };

        rd_counter++;

        return this; // RETURN JQUERY OBJECT

    }

})();

Answer 10

Это работает для меня. Посмотреть это решение - https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
    //whatever we want to do 
}