jQuery - как дождаться окончания события 'resize' и только потом выполнить действие?

Question

Так что я сейчас использую что-то вроде:

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

Но это вызывается много раз, пока продолжается процесс изменения размера. Можно ли поймать событие, когда оно заканчивается?

Answer 1

var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

Это сработало для того, что я пытался сделать в Chrome. Это не вызовет обратный вызов до 200 мс после последнего события изменения размера.

Answer 2

это сработало для меня, так как я не хотел использовать какие-либо плагины.

$(window).resize(function() {
    var originalWindowSize = 0;
    var currentWidth = 0;

    var setFn = function () {
        originalWindowSize = $(window).width();
    };

    var checkFn = function () {
        setTimeout(function () {
            currentWidth = $(window).width();
            if (currentWidth === originalWindowSize) {
                console.info("same? = yes") 
                // execute code 
            } else {
                console.info("same? = no"); 
                // do nothing 
            }
        }, 500)
    };
    setFn();
    checkFn();
});

При изменении размера окна вызывайте «setFn», который получает ширину окна и сохраняет как «originalWindowSize». Затем вызовите «checkFn», который через 500 мс (или ваше предпочтение) получает текущий размер окна и сравнивает оригинал с текущим, если они не совпадают, тогда окно все еще изменяется. Не забудьте удалить консольные сообщения в производственном процессе, и (необязательно) может заставить "setFn" выполняться самостоятельно.

Answer 3

UPDATE!

Лучшая альтернатива, также созданная мной, находится здесь: https://stackoverflow.com/a/23692008/2829600 (поддерживает «функции удаления»)

ОРИГИНАЛЬНАЯ ПОЧТА:

Я написал эту простую функцию для обработки задержки выполнения, полезную внутри jQuery .scroll () и .resize (), поэтому callback_f будет запускаться только один раз для конкретной строки идентификатора.

function delay_exec( id, wait_time, callback_f ){

    // IF WAIT TIME IS NOT ENTERED IN FUNCTION CALL,
    // SET IT TO DEFAULT VALUE: 0.5 SECOND
    if( typeof wait_time === "undefined" )
        wait_time = 500;

    // CREATE GLOBAL ARRAY(IF ITS NOT ALREADY CREATED)
    // WHERE WE STORE CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID
    if( typeof window['delay_exec'] === "undefined" )
        window['delay_exec'] = [];

    // RESET CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID,
    // SO IN THAT WAY WE ARE SURE THAT callback_f WILL RUN ONLY ONE TIME
    // ( ON LATEST CALL ON delay_exec FUNCTION WITH SAME ID  )
    if( typeof window['delay_exec'][id] !== "undefined" )
        clearTimeout( window['delay_exec'][id] );

    // SET NEW TIMEOUT AND EXECUTE callback_f WHEN wait_time EXPIRES,
    // BUT ONLY IF THERE ISNT ANY MORE FUTURE CALLS ( IN wait_time PERIOD )
    // TO delay_exec FUNCTION WITH SAME ID AS CURRENT ONE
    window['delay_exec'][id] = setTimeout( callback_f , wait_time );
}


// USAGE

jQuery(window).resize(function() {

    delay_exec('test1', 1000, function(){
        console.log('1st call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('2nd call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('3rd call to delay "test1" successfully executed!');
    });

    delay_exec('test2', 1000, function(){
        console.log('1st call to delay "test2" successfully executed!');
    });

    delay_exec('test3', 1000, function(){
        console.log('1st call to delay "test3" successfully executed!');
    });

});

/* RESULT
3rd call to delay "test1" successfully executed!
1st call to delay "test2" successfully executed!
1st call to delay "test3" successfully executed!
*/