반응형
JavaScript/JQuery: $(창).크기 조정이 완료된 후 실행 방법을 조정하시겠습니까?
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");
});
의 1 콜 에서 윈도우되어 있는 , B 에 합니다.다만, 예를 들면, 코드의 다른 부분이 윈도 사이징에 대해서 다른 콜백을 설정하는 경우, 이러한 콜백이 공유되는 경우는, B/C에 실패합니다.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);
});
글로벌 javascript 파일 어딘가에 있을 수 있습니다.
반복 작업을 지연시키기 위해 다음 기능을 사용합니다. 당신의 경우 효과가 있습니다.
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);
참고 자료: http://davidwalsh.name/javascript-debounce-function
사실, 제가 알기로는, 크기 조정이 해제되어 있을 때는 단순히 미래의 사용자의 동작을 모르기 때문에 몇 가지 작업을 수행할 수 없습니다.그러나 두 크기 조정 이벤트 사이에 시간이 경과했다고 가정할 수 있으므로 이 시간보다 조금 더 기다려도 크기가 변경되지 않으면 함수를 호출할 수 있습니다.
아이디어는 ''를 사용한다는 입니다.setTimeout아이디예를 들어, 2개의 크기 조정 이벤트 사이의 시간은 500ms이므로 750ms를 기다립니다.
var a;
$(window).resize(function(){
clearTimeout(a);
a = setTimeout(function(){
// call your function
},750);
});글로벌하게 지연된 리스너 선언:
var resize_timeout;
$(window).on('resize orientationchange', function(){
clearTimeout(resize_timeout);
resize_timeout = setTimeout(function(){
$(window).trigger('resized');
}, 250);
});
그리고 아래에서는 청취자를 사용하여resized원하는 이벤트:
$(window).on('resized', function(){
console.log('resized');
});
저는 좋아요.이 솔루션 보기 - https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
//whatever we want to do
}지연된 창 크기 조정 이벤트를 위한 단순 jQuery 플러그인입니다.
구문:
이벤트 크기를 조정할 새 기능 추가
jQuery(window).resizeDelayed( func, delay, id ); // delay and id are optional
이전에 추가한 함수(ID를 선언하여)를 제거합니다.
jQuery(window).resizeDelayed( false, id );
모든 기능 제거
jQuery(window).resizeDelayed( false );
용도:
// ADD SOME FUNCTIONS TO RESIZE EVENT
jQuery(window).resizeDelayed( function(){ console.log( 'first event - should run after 0.4 seconds'); }, 400, 'id-first-event' );
jQuery(window).resizeDelayed( function(){ console.log('second event - should run after 1.5 seconds'); }, 1500, 'id-second-event' );
jQuery(window).resizeDelayed( function(){ console.log( 'third event - should run after 3.0 seconds'); }, 3000, 'id-third-event' );
// LETS DELETE THE SECOND ONE
jQuery(window).resizeDelayed( false, 'id-second-event' );
// LETS ADD ONE WITH AUTOGENERATED ID(THIS COULDNT BE DELETED LATER) AND DEFAULT TIMEOUT (500ms)
jQuery(window).resizeDelayed( function(){ console.log('newest event - should run after 0.5 second'); } );
// LETS CALL RESIZE EVENT MANUALLY MULTIPLE TIMES (OR YOU CAN RESIZE YOUR BROWSER WINDOW) TO SEE WHAT WILL HAPPEN
jQuery(window).resize().resize().resize().resize().resize().resize().resize();
사용 상황 출력:
first event - should run after 0.4 seconds
newest event - should run after 0.5 second
third event - should run after 3.0 seconds
플러그인:
jQuery.fn.resizeDelayed = (function(){
// >>> THIS PART RUNS ONLY ONCE - RIGHT NOW
var rd_funcs = [], rd_counter = 1, foreachResizeFunction = function( func ){ for( var index in rd_funcs ) { func(index); } };
// REGISTER JQUERY RESIZE EVENT HANDLER
jQuery(window).resize(function() {
// SET/RESET TIMEOUT ON EACH REGISTERED FUNCTION
foreachResizeFunction(function(index){
// IF THIS FUNCTION IS MANUALLY DISABLED ( by calling jQuery(window).resizeDelayed(false, 'id') ),
// THEN JUST CONTINUE TO NEXT ONE
if( rd_funcs[index] === false )
return; // CONTINUE;
// IF setTimeout IS ALREADY SET, THAT MEANS THAT WE SHOULD RESET IT BECAUSE ITS CALLED BEFORE DURATION TIME EXPIRES
if( rd_funcs[index].timeout !== false )
clearTimeout( rd_funcs[index].timeout );
// SET NEW TIMEOUT BY RESPECTING DURATION TIME
rd_funcs[index].timeout = setTimeout( rd_funcs[index].func, rd_funcs[index].delay );
});
});
// <<< THIS PART RUNS ONLY ONCE - RIGHT NOW
// RETURN THE FUNCTION WHICH JQUERY SHOULD USE WHEN jQuery(window).resizeDelayed(...) IS CALLED
return function( func_or_false, delay_or_id, id ){
// FIRST PARAM SHOULD BE SET!
if( typeof func_or_false == "undefined" ){
console.log( 'jQuery(window).resizeDelayed(...) REQUIRES AT LEAST 1 PARAMETER!' );
return this; // RETURN JQUERY OBJECT
}
// SHOULD WE DELETE THE EXISTING FUNCTION(S) INSTEAD OF CREATING A NEW ONE?
if( func_or_false == false ){
// DELETE ALL REGISTERED FUNCTIONS?
if( typeof delay_or_id == "undefined" ){
// CLEAR ALL setTimeout's FIRST
foreachResizeFunction(function(index){
if( typeof rd_funcs[index] != "undefined" && rd_funcs[index].timeout !== false )
clearTimeout( rd_funcs[index].timeout );
});
rd_funcs = [];
return this; // RETURN JQUERY OBJECT
}
// DELETE ONLY THE FUNCTION WITH SPECIFIC ID?
else if( typeof rd_funcs[delay_or_id] != "undefined" ){
// CLEAR setTimeout FIRST
if( rd_funcs[delay_or_id].timeout !== false )
clearTimeout( rd_funcs[delay_or_id].timeout );
rd_funcs[delay_or_id] = false;
return this; // RETURN JQUERY OBJECT
}
}
// NOW, FIRST PARAM MUST BE THE FUNCTION
if( typeof func_or_false != "function" )
return this; // RETURN JQUERY OBJECT
// SET THE DEFAULT DELAY TIME IF ITS NOT ALREADY SET
if( typeof delay_or_id == "undefined" || isNaN(delay_or_id) )
delay_or_id = 500;
// SET THE DEFAULT ID IF ITS NOT ALREADY SET
if( typeof id == "undefined" )
id = rd_counter;
// ADD NEW FUNCTION TO RESIZE EVENT
rd_funcs[id] = {
func : func_or_false,
delay: delay_or_id,
timeout : false
};
rd_counter++;
return this; // RETURN JQUERY OBJECT
}
})();
윈도우 크기 조정 후 마우스 커서가 문서로 돌아간다고 가정하면 온마우스오버 이벤트를 통해 콜백과 같은 동작을 만들 수 있습니다.이 솔루션은 터치스크린에서는 예상대로 작동하지 않을 수 있습니다.
var resizeTimer;
var resized = false;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if(!resized) {
resized = true;
$(document).mouseover(function() {
resized = false;
// do something here
$(this).unbind("mouseover");
})
}
}, 500);
});
다음은 제가 구현한 내용입니다.
$(표준)resize ( function ) { set Timeout ( some Function , 500 ) ;
set Timeout을 클리어 할 수 있습니다.크기가 다음 값보다 작을 것으로 예상되는 경우500ms
행운을 빈다...
다양한 솔루션mouuse 이벤트 후에 이벤트를 하려고 했기 때문에 창이 뜨자마자 새로고침을 추가했습니다.
jQuery(window).resize(function() {
// this. is window
if( this.resizeTO) {
clearTimeout(this.resizeTO)
};
this.resizeTO = setTimeout(function() {
jQuery(window).mouseenter(function() {
if( jQuery(window).width() < 700 && jQuery(window).width() > 400 ){
console.log("mouseenter reloads elements");
// is loading the page
location.reload();
//
}; // just mobile
}); // mouse fired
}, 400); // set Time Ouuut
});
언급URL : https://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed
반응형
'programing' 카테고리의 다른 글
| 시간 간격을 C로 측정하려면 어떻게 해야 하나요? (0) | 2022.11.01 |
|---|---|
| JavaScript를 사용하여 다크모드를 검출하려면 어떻게 해야 하나요? (0) | 2022.11.01 |
| MySQL은 ORDER BY로 행 위치를 가져옵니다. (0) | 2022.11.01 |
| 동적 폭과 동일한 높이(CSS 유체 레이아웃) (0) | 2022.11.01 |
| Retrofit 2.0에서 인터셉터를 사용하여 헤더를 추가하는 방법 (0) | 2022.11.01 |