'크기 조정' 이벤트가 끝날 때까지 기다렸다가 조치를 취하는 방법은 무엇입니까?

'크기 조정' 이벤트가 끝날 때까지 기다렸다가 조치를 취하는 방법은 무엇입니까?

그래서 저는 현재 다음과 같은 것을 사용하고 있습니다.

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

그러나 크기 조정 프로세스가 진행되는 동안 여러 번 호출됩니다.이벤트가 끝날 때 볼 수 있나요?

하시면 됩니다.setTimeout() ★★★★★★★★★★★★★★★★★」clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

jsfiddle의 코드 예시.

저는 http://forum.jquery.com/topic/the-resizeend-event을 추천할 수 있었습니다.

다음은 코드이므로 그의 게시물 링크와 출처를 확인할 필요가 없습니다.

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

sime.vidas 코드 고마워요!

@Mark Coleman의 답변에 따라 작성한 코드는 다음과 같습니다.

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

고마워 마크!

Internet Explorer는 resizeEnd 이벤트를 제공합니다.크기를 조정하는 동안 다른 브라우저는 크기 조정 이벤트를 여러 번 트리거합니다.

lodash와 언더스코어에서 setTimeout과 .스로틀, .debounce 메서드를 사용하는 방법을 보여주는 다른 훌륭한 답변이 있습니다.따라서 Ben Alman의 throttle-debounce jQuery 플러그인에 대해 설명하겠습니다.

크기 조정 후 트리거하려는 기능이 있다고 가정합니다.

function onResize() {
  console.log("Resize just happened!");
};

예시
예제에서는 음음 in in in in 。onResize()는 창 크기 조정 중에 250밀리초에 한 번만 호출됩니다.

$(window).resize( $.throttle( 250, onResize) );

예시
예제에서는 음음 in in in in 。onResize()창 크기 조정 작업의 마지막에 한 번만 호출됩니다.이는 @Mark가 답변에 제시한 것과 같은 결과를 얻을 수 있습니다.

$(window).resize( $.debounce( 250, onResize) );

Underscore.js를 사용하는 우아한 솔루션이 있습니다.프로젝트에서 사용하는 경우 다음 작업을 수행할 수 있습니다.

$( window ).resize( _.debounce( resizedw, 500 ) );

---

이 정도면 충분합니다:) 하지만 더 읽고 싶으시면 제 블로그 포스트를 확인하세요 - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce(deadlink)

크기 조정의 마지막에 함수를 실행하는 방법은, 2개의 콜간의 델타 시간을 계산하는 것보다 훨씬 심플합니다.단, 다음과 같이 실행합니다.

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

그리고 Angular2에 대한 등가:

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}

은 '각도법합니다.() => { }setTimeout하기 위해 호출을 할 수 없거나 호출을 할 수 없습니다.this.

하나의 솔루션은 다음과 같은 함수를 사용하여 jQuery를 확장하는 것입니다. resized

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

사용 예:

$(window).resized(myHandler, 300);

참조 ID는 임의의 setInterval 또는 setTimeout에 저장할 수 있습니다.다음과 같이 합니다.

var loop = setInterval(func, 30);

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

이를 위해 "글로벌" 변수를 사용하지 않고 함수 자체에 로컬 변수를 추가합니다.예:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

하시면 됩니다.setTimeout() ★★★★★★★★★★★★★★★★★」clearTimeout()다음 항목과 함께 사용합니다.

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

갱신하다

jQuery의 기본값을 향상시키기 위해 확장자를 썼습니다.on(&)bind)-이벤트 리셋.이벤트가 특정 간격 동안 트리거되지 않은 경우 하나 이상의 이벤트에 대한 이벤트 핸들러 기능을 선택한 요소에 부가합니다.이는 크기 조정 이벤트 등 지연 후에만 콜백을 실행하는 경우에 유용합니다.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));

하세요.on ★★★★★★★★★★★★★★★★★」bind이벤트 핸들러(마지막으로 추가 파라미터를 전달할 수 있는 점 제외)

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

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

ID(Mark Coleman)의 글로벌 doit이치하다

(1) 즉시 호출된 함수식(IIFE)을 사용하여 닫힘을 작성한다.

$(window).resize((function() { // This function is immediately invoked
                               // and returns the closure function.
    var timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            timeoutId = null; // You could leave this line out.
            // Code to execute on resize goes here.
        }, 100);
    };
})());

(2) 이벤트 핸들러 기능의 속성을 사용한다.

$(window).resize(function() {
    var thisFunction = arguments.callee;
    clearTimeout(thisFunction.timeoutId);
    thisFunction.timeoutId = setTimeout(function() {
        thisFunction.timeoutId = null; // You could leave this line out.
        // Code to execute on resize goes here.
    }, 100);
});

창의 크기 조정 시작 및 크기 조정 종료 이벤트

http://jsfiddle.net/04fLy8t4/

사용자 DOM 요소에서 두 가지 이벤트를 트리거하는 기능을 구현했습니다.

1. 재기동
2. 크기 변경

코드:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

이것은 위의 Dolan 코드에 대한 수정입니다. 크기 조정 시작 시 창 크기를 확인하고 크기 조정 끝의 크기와 비교하는 기능을 추가했습니다. 크기가 여백보다 크거나 작으면 새로고침됩니다.

var rtime = new Date(1, 1, 2000, 12,00,00);
var timeout = false;
var delta = 200;
var windowsize = $window.width();
var windowsizeInitial = $window.width();

$(window).on('resize',function() {
    windowsize = $window.width();
    rtime = new Date();
    if (timeout === false) {
            timeout = true;
            setTimeout(resizeend, delta);
        }
});

function resizeend() {
if (new Date() - rtime < delta) {
    setTimeout(resizeend, delta);
    return false;
} else {
        if (windowsizeInitial > 1000 && windowsize > 1000 ) {
            setTimeout(resizeend, delta);
            return false;
        }
        if (windowsizeInitial < 1001 && windowsize < 1001 ) {
            setTimeout(resizeend, delta);
            return false;
        } else {
            timeout = false;
            location.reload();
        }
    }
    windowsizeInitial = $window.width();
    return false;
}

다음은 창 개체에서 'resizestart' 및 'resizeend' 이벤트를 모두 트리거하는 매우 간단한 스크립트입니다.

날짜와 시간을 가지고 장난칠 필요는 없다.

d이벤트를 전의 크기 간의 수를 이 값을 할 수 .이 값을 사용하여 엔드 이벤트의 감도를 변경할 수 있습니다.

이러한 이벤트를 듣기 위해 필요한 것은 다음과 같습니다.

재설::$(window).on('resizestart', function(event){console.log('Resize Start!');});

: " " " " :$(window).on('resizeend', function(event){console.log('Resize End!');});

(function ($) {
    var d = 250, t = null, e = null, h, r = false;

    h = function () {
        r = false;
        $(window).trigger('resizeend', e);
    };

    $(window).on('resize', function (event) {
        e = event || e;
        clearTimeout(t);

        if (!r) {
            $(window).trigger('resizestart', e);
            r = true;
        }

        t = setTimeout(h, d);
    });
}(jQuery));

내가 직접 리트 래퍼 기능을 썼는데...

onResize  =   function(fn) {
    if(!fn || typeof fn != 'function')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on('resize', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

사용방법은 다음과 같습니다.

var testFn  = function(arg1, arg2) {
    console.log('[testFn] arg1: '+arg1);
    console.log('[testFn] arg2: '+arg2);
};

// document ready
$(function() {
    onResize(testFn, 'argument1', 'argument2');
});

(function(){
    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.resizestart = {
        setup: function() {
            var timer,
                handler =  function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'resizestart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.resizestop.latency);
                };
            jQuery(this).bind('resize', handler).data(uid1, handler);
        },
        teardown: function(){
            jQuery(this).unbind( 'resize', jQuery(this).data(uid1) );
        }
    };

    special.resizestop = {
        latency: 200,
        setup: function() {
            var timer,
                handler = function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout( function(){
                        timer = null;
                        evt.type = 'resizestop';
                        jQuery.event.handle.apply(_self, _args);
                    }, special.resizestop.latency);
                };

            jQuery(this).bind('resize', handler).data(uid2, handler);
        },
        teardown: function() {
            jQuery(this).unbind( 'resize', jQuery(this).data(uid2) );
        }
    };
})();

$(window).bind('resizestop',function(){
    //...
});

창 관리자에 관한 한 크기 조정 이벤트는 각각 고유한 메시지이며 시작과 끝이 구분되므로 엄밀히 말하면 창 크기가 변경될 때마다 끝입니다.

그렇다고 하셨는데, 혹시 계속 미루고 싶으신 건 아닐까요?여기 예가 있습니다.

var t = -1;
function doResize()
{
    document.write('resize');
}
$(document).ready(function(){
    $(window).resize(function(){
        clearTimeout(t);
        t = setTimeout(doResize, 1000);
    });
});

이것은 반복된 동작을 지연시키기 위해 사용하는 것입니다.코드의 여러 위치에서 호출할 수 있습니다.

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);
    };
};

사용방법:

$(window).resize(function () { 
   debounce(function() {
          //...
    }, 500);
});

선택한 답변이 실제로 동작하지 않았기 때문에, 여기서 jquery를 사용하지 않을 경우, 윈도우 크기 조정과 함께 사용하는 방법의 예시와 함께 간단한 스로틀 기능이 있습니다.

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren't waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log('throttle resize');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

플러그 인을 사용하고 싶지 않았기 때문에, 이것은 나에게 효과가 있었습니다.

$(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"을 호출하여 창 너비를 가져오고 "original WindowSize"로 저장합니다.그런 다음 "checkFn"을 호출하여 500ms 후(또는 기본 설정) 현재 창 크기를 가져오고 원본과 현재 창 크기를 비교합니다. 그렇지 않으면 창 크기를 다시 조정합니다.프로덕션에서 콘솔메시지를 삭제하는 것을 잊지 마세요.그러면 (옵션) "setFn"을 자동으로 실행할 수 있습니다.

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

이것은 내가 크롬으로 하려고 했던 것에 효과가 있었다.마지막으로 크기 조정 이벤트가 발생한 후 200ms까지 콜백이 실행되지 않습니다.

업데이트!

제가 만든 더 나은 대안도 여기 있습니다: https://stackoverflow.com/a/23692008/2829600 ("delete functions" 참조)

최초 투고:

이 간단한 함수는 실행 지연을 처리하기 위해 jQuery .scroll() 및 .resize() 내에서 작성되었습니다.따라서 callback_f는 특정 ID 문자열에 대해 한 번만 실행됩니다.

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!
*/

var flag=true;
var timeloop;

$(window).resize(function(){
    rtime=new Date();
    if(flag){
        flag=false;
        timeloop=setInterval(function(){
            if(new Date()-rtime>100)
                myAction();
        },100);
    }
})
function myAction(){
    clearInterval(timeloop);
    flag=true;
    //any other code...
}

내 코드가 다른 사람에게 효과가 있는지는 모르겠지만, 나에겐 정말 큰 도움이 된다.나는 Dolan Antenucci 코드를 분석해서 아이디어를 얻었는데, 그의 버전이 나에게 맞지 않아서 누군가에게 도움이 되었으면 좋겠다.

var tranStatus = false;
$(window).resizeend(200, function(){
    $(".cat-name, .category").removeAttr("style");
    //clearTimeout(homeResize);
    $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
      tranStatus = true;
    });
    processResize();
});

function processResize(){
  homeResize = setInterval(function(){
    if(tranStatus===false){
        console.log("not yet");
        $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
            tranStatus = true;
        }); 
    }else{
        text_height();
        clearInterval(homeResize);
    }
  },200);
}

크기 조정 이벤트로 감싸면 함수가 전달되는 함수를 작성했습니다.크기 조정 시 타임아웃 이벤트가 지속적으로 생성되지 않도록 간격을 사용합니다.따라서 프로덕션에서 삭제해야 하는 로그 항목 이외의 크기 조정 이벤트와는 독립적으로 수행할 수 있습니다.

https://github.com/UniWrighte/resizeOnEnd/blob/master/resizeOnEnd.js

        $(window).resize(function(){
            //call to resizeEnd function to execute function on resize end.
    //can be passed as function name or anonymous function
            resizeEnd(function(){



    });

        });

        //global variables for reference outside of interval
        var interval = null;
        var width = $(window).width();
    var numi = 0; //can be removed in production
        function resizeEnd(functionCall){
            //check for null interval
            if(!interval){
                //set to new interval
                interval = setInterval(function(){
        //get width to compare
                    width2 = $(window).width();
        //if stored width equals new width
                    if(width === width2){
                        //clear interval, set to null, and call passed function
                        clearInterval(interval);
                        interval = null; //precaution
                        functionCall();

                    }
        //set width to compare on next interval after half a second
                    width = $(window).width();
                }, 500);

            }else{
                //logging that should be removed in production
                console.log("function call " + numi++ + " and inteval set skipped");

            }

}

다른 케이스와 다를 수 있지만 iOS의 방향 변경에만 문제가 있어 크기 조정 이벤트가 바로 실행되기를 바랐습니다.제가 사용한 것은ScreenOrientationAPI:

screen.orientation.addEventListener('change', (e) => {});

나는 조금 다른 방법을 택해서mouseUp의 마지막에resizetrackSizedocumentReady " " " " 입니다.wide그때도 정해져 있어요.

  var THRESHOLD = 784;
  var TALL = 125, SHORT = 50;
  var wide = (window.document.body.clientWidth >= THRESHOLD );

  function trackSize() {
    if( !wide ) {
      setHeight( TALL );
    } else {
      setHeight( SHORT );
    }
    parent.window.addEventListener('resize', onResize);
  }
  function onResize(e) {
    parent.window.removeEventListener('resize', onResize);
    parent.window.addEventListener('mouseup', onMouseUp) ;
  }
  function onMouseUp(e) {
    parent.window.removeEventListener('mouseup', onMouseUp);
    wide = (window.document.body.clientWidth >= THRESHOLD);
    trackSize();
  }

높이를 , 합니다.resize하면 듣기를 합니다.mouseUp걸 알 수 요. 따라서, 우리는 그 사건들을 알고 있다.mouseUp사이징이 종료됩니다. »mouseUp, , 다시, 다시, 다시, 창 너비에 토글합니다.trackSize.

trackSize토글에 따라 창의 높이를 설정하는 것으로 시작합니다. 임계값보다 낮은 경우 높이를 증가시킵니다(부트스트랩 열이 작은 폭으로 쌓이기 때문에). 그렇지 않으면 표준으로 설정됩니다. 한 번요.resize

경고: 이 솔루션은 창 최대화 버튼 또는 복원 버튼을 사용하여 즉시 크기를 조정할 수 없습니다.아마도 다음과 같은 테스트를 추가할 수 있습니다.isMouseDown마우스 리스너를 우회하는 것으로 충분합니다. 이치노

언급URL : https://stackoverflow.com/questions/5489946/how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-action