[javascript] JavaScript를 사용하여 창의 크기를 조정할 때 감지?

Program / 글쓴이

사용자가 브라우저 창 크기 조정을 끝내면 jQuery 또는 JavaScript를 사용하여 함수를 트리거하는 방법이 있습니까?

다른 말로하면 :

  1. 사용자가 브라우저 창 크기를 조정할 때 마우스 업 이벤트를 감지 할 수 있습니까? 그렇지 않으면:
  2. 창 크기 조정 작업이 완료된 시점을 감지 할 수 있습니까?

현재 사용자가 jQuery로 창 크기를 조정하기 시작할 때만 이벤트를 트리거 할 수 있습니다

답변

.resize()너비 / 높이가 실제로 변경 될 때마다 다음과 같이 사용할 수 있습니다 .

$(window).resize(function() {
  //resize just happened, pixels changed
});

여기 에서 작동하는 데모를 볼 수 있습니다 . 새로운 높이 / 폭 값을 가져 와서 페이지에서 업데이트합니다. 이벤트가 실제로 시작 되거나 끝나지 않는다는 것을 기억하십시오. 크기 조정이 발생하면 그냥 “일어납니다”… 다른 이벤트가 발생하지 않는다는 말은 없습니다.

편집 : 의견에 따르면 “종료”이벤트와 같은 것을 원한다고 생각하지만, 당신이 찾은 해결책은 몇 가지 예외를 제외하고는 수행합니다. 종료 대 일시 중지에 대해서도 동일 ). 그래도 다음과 같이 이벤트를 좀 더 깔끔하게 만들 수 있습니다 .

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

이 파일을 원하는 위치에 기본 파일로 만들 수 있습니다. 그러면 다음 resizeEnd과 같이 트리거 하는 새 이벤트에 바인딩 할 수 있습니다 .

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

현재이 방식의 작동 데모를 볼 수 있습니다

답변

이는 달성 될 수있다 하여 onResize 자바 스크립트의 기능을 할당하여 GlobalEventHandlers 인터페이스 속성 하여 onResize 과 같이, 속성 :

window.onresize = functionRef;

다음 코드 스 니펫은 크기를 조정할 때마다 창의 innerWidth 및 innerHeight를 콘솔 로깅하여이를 보여줍니다. (창 크기를 조정 한 후 크기 조정 이벤트가 발생 함) 

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;
<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

스 니펫 확장

답변

JavaScript 만 사용하여이 작업을 수행하는 다른 방법은 다음과 같습니다.

window.addEventListener('resize', functionName);

이것은 다른 답변과 같이 크기가 변경 될 때마다 발생합니다.

functionName 창 크기를 조정할 때 실행되는 함수의 이름입니다 (끝의 대괄호는 필요하지 않습니다).

답변

스크롤이 끝났을 때만 확인하려면 Vanilla JS에서 다음과 같은 솔루션을 얻을 수 있습니다.

슈퍼 슈퍼 컴팩트

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

3 가지 조합 가능 (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}
function resStarted() {
    console.log('Resize Started')
}
function resEnded() {
    console.log('Resize Ended')
}

답변