[javascript] ‘크기 조정’이벤트의 ‘종료’를 기다린 다음 작업을 수행하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

그래서 나는 현재 다음과 같은 것을 사용합니다 :

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

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

답변

다음 권장 사항으로 운이 좋았습니다 .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!

답변

당신이 사용할 수있는 setTimeout()및clearTimeout()

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

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

jsfiddle의 코드 예제 .

답변

이것은 @Mark Coleman의 답변에 따라 작성한 코드입니다.

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

고마워 마크!

답변

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

여기에 setTimeout 및 .throttle 을 사용하는 방법을 보여주는 다른 훌륭한 답변이 있습니다 .lodash 와 밑줄에서 .debounce 메소드를 사용하므로 Ben Alman의 throttle-debounce jQuery 플러그인에 대해 언급 합니다.

크기 조정 후 트리거하려는이 기능이 있다고 가정하십시오.

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

스로틀 예제
다음 예제 에서는 onResize()창 크기를 조정하는 동안 250 밀리 초마다 한 번 씩만 호출됩니다.

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

디 바운스 예제
다음 예제 에서는 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 -디 바운스 (데드 링크)

답변

한 가지 해결책은 다음과 같은 기능으로 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);

답변

setInterval 또는 setTimeout에 대한 참조 ID를 저장할 수 있습니다. 이처럼 :

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