>웹 프론트엔드 >JS 튜토리얼 >Jquery 지연 실행 예시 소개

Jquery 지연 실행 예시 소개

巴扎黑
巴扎黑원래의
2017-06-30 11:44:471204검색

지연 실행은 일부 특별한 상황에서 매우 유용하며 구현 방법도 매우 간단합니다. 이 기사에는 도움이 필요한 친구들이 참고할 수 있습니다.

코드는 다음과 같습니다.

$(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와 비교하면 큐에 있는 코드는 큐가 실행된 후에는 조정되지 않는 것을 알 수 있습니다. , animation 대기열도 중지되었습니다. 실행을 계속하려면 dequeue를 호출하여 실행을 계속해야 합니다(여기 대기열의 hide()는 애니메이션이 아니며 현재 의 애니메이션이 문제가 될 수 있습니다. 개체 가 대기열에 배치됩니다.

코드는 다음과 같습니다.

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

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

위 내용은 Jquery 지연 실행 예시 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.