[jquery] jQuery로 5 초 동안 기다리는 방법?
페이지가로드되는 효과를 만들려고하는데 5 초 후에 화면의 성공 메시지가 사라지거나 위로 올라갑니다.
어떻게하면 되나요?
답변
자바 스크립트 setTimeout 내장 .
setTimeout(
function()
{
//do something special
}, 5000);업데이트 : 페이지 로딩이 완료된 이후로 기다리려면 $(document).ready(...);스크립트 에 해당 코드를 넣으십시오 .
업데이트 2 : jquery 1.4.0에 .delay메소드가 도입되었습니다 . 확인하십시오 . .delay는 jQuery 효과 대기열에서만 작동합니다.
답변
일반적인 자바 스크립트 타이머를 사용하십시오.
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});DOM이 준비된 후 5 초 동안 기다립니다. 실제로 페이지가 나타날 때까지 기다리려면 loaded다음을 사용해야합니다.
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})편집 : OP의 의견에 대한 답변으로 jQuery에 수행 할 수있는 방법이 있는지 묻고 setTimeout대답을 사용하지 않는 것은 아니오입니다. 그러나 더 “jQueryish”로 만들고 싶다면 다음과 같이 감싸십시오.
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}그런 다음 다음과 같이 호출 할 수 있습니다.
$.wait( function(){ $("#message").slideUp() }, 5);답변
나는이 질문을 가로 질러이 주제에 대한 업데이트를 제공 할 것이라고 생각했습니다. jQuery (v1.5 +)에는 Deferred모델이 포함되어 있으며 ( jQuery 3까지 Promises / A 사양을 준수하지 않더라도 ) 일반적으로 많은 비동기 문제에 접근하는보다 명확한 방법으로 간주됩니다. $.wait()이 접근법을 사용하여 메소드를 구현하는 것은 특히 읽을 수 있습니다.
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};사용 방법은 다음과 같습니다.
$.wait(5000).then(disco);그러나 일시 중지 한 후 단일 jQuery 선택에 대해서만 작업을 수행하려는 경우 jQuery의 네이티브 를 사용해야 합니다. .delay()이는 기본적 으로 Deferred를 사용한다고 생각합니다.
$(".my-element").delay(5000).fadeIn();답변
setTimeout(function(){
},5000); 내부에 코드를 배치하십시오 { }
300 = 0.3 seconds
700 = 0.7 seconds
1000 = 1 second
2000= 2 seconds
2200 = 2.2 seconds
3500 = 3.5 seconds
10000 = 10 seconds기타
답변
클릭시 즉시 닫을 수 있거나 10 초 후에 자동 닫기를 수행하는 메시지 오버레이에이 기능을 사용했습니다.
button = $('.status-button a', whatever);
if(button.hasClass('close')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}답변
밑줄 라이브러리는 또한 “지연”기능을 제공합니다 :
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');답변
Joey의 답변을 바탕으로 (jQuery에 의해 ‘queue’에 대한 읽기) 솔루션을 찾았습니다.
jQuery.animate () 구문을 다소 따릅니다. 다른 fx 함수와 연결될 수 있으며 ‘느린’및 다른 jQuery.fx.speeds를 지원할뿐만 아니라 완전히 jQuery입니다. 애니메이션을 중지하면 애니메이션과 같은 방식으로 처리됩니다.
더 많은 사용법을 가진 jsFiddle 테스트 그라운드 (예 : .stop () 표시)는 여기 에서 찾을 수 있습니다 .
솔루션의 핵심은 다음과 같습니다.
$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>플러그인 전체로서 $ .wait () 및 $ (..). wait ()의 사용법을 지원합니다.
// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {
$.wait = function(duration, completeCallback, target) {
$target = $(target || '<queue />');
return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
}
$.fn.wait = function(duration, completeCallback) {
return $.wait.call(this, duration, completeCallback, this);
};
})(jQuery);
//TEST
$(function() {
// stand alone
$.wait(1000, function() {
$('#result')
.append('...done');
});
// chained
$('#result')
.append('go...')
.wait('slow', function() {
$(this).append('after slow');
})
.css({color: 'green'});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>참고 : wait가 애니메이션 스택에 추가되므로 $ .css ()가 예상대로 실행됩니다. 예상되는 jQuery 동작입니다.
