Jquery 지연 실행 소개 example_jquery

코드 복사 코드는 다음과 같습니다.

$(function(){
var $inputs = $( 'input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay (1500)
.queue(function(){$(this).show();});
})

위 코드는 500페이지에 버튼을 만듭니다. 페이지가 로드된 후 밀리초 후에 숨겼다가 1500밀리초 후에 표시됩니다.

코드 복사 코드는 다음과 같습니다.

$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay (1500)
.show(1);
//.queue(function(){$(this).show();})

위 코드는 이전 코드와 동일한 효과를 가집니다.

코드 복사 코드는 다음과 같습니다.

$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide();})
.delay( 1500)
.show(1);
//.queue(function(){$(this).show();})
}); 위와 같은 코드는 숨겨져 있을 뿐 다시 표시되지 않습니다. 코드 2와 비교하면 대기열에 있는 코드는 대기열 실행이 완료된 후 애니메이션 대기열이 계속 실행되는 것을 알 수 있습니다. 또한 중지되었으며 실행을 계속하려면 Dequeue를 호출해야 합니다(여기서 대기열의 hide()는 애니메이션이 아니며 현재 개체의 애니메이션이 대기열에서 실행되는 경우 문제가 발생합니다).

코드 복사

코드는 다음과 같습니다. $(function(){ var $inputs = $('input[type=button]')

.delay(500)

.queue(function(){$(this).hide().dequeue();})
.delay (1500)
.show();
//.show(1);
})


위 코드는 숨겨지기만 합니다. 다시 표시됩니다! ! 여기서 show는 더 이상 애니메이션 지속 시간을 지정하지 않으므로 show 메소드는 더 이상 애니메이션이 아닙니다. Dequeue는 애니메이션 대기열의 후속 메서드만 실행할 수 있지만 애니메이션이 아닌 대기열의 jquery 메서드는 계속 실행할 수 없다는 것을 알 수 있습니다.