JQuery를 다음과 같이 사용하고 있습니다.
$(window).resize(function() { ... });그러나 사용자가 창 가장자리를 드래그하여 브라우저 창의 크기를 조정하여 더 크거나 작게 만들면 .resize위 의 이벤트가 여러 번 발생합니다.
질문 : 브라우저 창의 크기 조정이 완료된 후 함수를 호출하는 방법 (이벤트가 한 번만 발생하도록)?
답변
코드의 여러 위치에서 호출 할 수있는 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변수 를 공유하는 데 실패 합니다.
이 수정을 통해 각 콜백에 고유 ID를 제공하고 해당 고유 ID를 사용하여 모든 시간 초과 이벤트를 개별적으로 유지합니다.
답변
이벤트를 만들고 싶습니다.
$(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);
});전역 자바 스크립트 파일에서이를 가질 수 있습니다.
답변
반복 동작을 지연시키기 위해 다음 기능을 사용합니다. 귀하의 경우에는 효과가 있습니다.
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();용법:
$(window).resize(function() {
delay(function(){
alert('Resize...');
//...
}, 500);
});전달 된 콜백 함수는 지정된 시간 후에 지연에 대한 마지막 호출이 이루어진 경우에만 실행됩니다. 그렇지 않으면 타이머가 재설정됩니다. 사용자가 입력을 중지 한 시점을 감지하는 등 다른 목적으로 유용합니다. ..
답변
Underscore.js를 설치 한 경우 다음을 수행 할 수 있습니다.
$(window).resize(_.debounce(function(){
alert("Resized");
},500));답변
앞에서 언급 한 솔루션 중 일부는 더 일반적인 사용법이지만 작동하지 않았습니다. 또는 창 크기 조정 작업을 수행 한이 것을 발견했습니다 .
$(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);
});
});답변
David Walsh에게 감사를 표합니다. 여기에 밑줄 디 바운스의 바닐라 버전이 있습니다.
암호:
// 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);답변
실제로, 내가 아는 것처럼, 향후 사용자의 동작을 모르기 때문에 크기 조정이 해제되어 있으면 정확히 몇 가지 동작을 수행 할 수 없습니다. 그러나 두 크기 조정 이벤트 사이에 시간이 경과했다고 가정 할 수 있으므로이 시간보다 조금 더 기다렸다가 크기를 조정하지 않으면 함수를 호출 할 수 있습니다.
아이디어는 우리가 사용 setTimeout하고 저장하거나 삭제하기 위해 ID라는 것입니다. 예를 들어 두 크기 조정 이벤트 사이의 시간이 500ms이므로 750ms를 기다립니다.
var a;
$(window).resize(function(){
clearTimeout(a);
a = setTimeout(function(){
// call your function
},750);
});