JQuery 단순 학습(6) - JQuery Callback 함수

2679 단어 JavaScripthtmljquery
애니메이션은 콜백 함수에 대한 수요를 창출했다.
————————————————————
질문
많은 jQuery 함수는 애니메이션과 관련이 있습니다.이 함수들은speed나duration을 선택할 수 있는 매개 변수로 사용할 수도 있습니다.
예: $("p").hide("slow")
speed나duration 매개 변수는'slow','fast','normal'또는 밀리초 등 여러 가지 다른 값을 설정할 수 있다.
인스턴스
4
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
JavaScript 문구(명령어)가 하나씩 실행되기 때문에 - 애니메이션 이후의 문구는 애니메이션이 아직 완성되지 않았기 때문에 오류나 페이지 충돌이 발생할 수 있습니다.
이를 방지하기 위해 Callback 함수를 매개 변수로 추가할 수 있습니다.
————————————————————
jQuery Callback 함수
애니메이션이 100% 완료되면 Callback 함수를 호출합니다.
일반적인 구문:
4
$(selector).hide(speed,callback)
callback 매개 변수는hide 작업이 끝난 후에 실행되는 함수입니다.
오류(callback 없음)
4
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(2000);
  alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
정확(callback 있음)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
 
결론: 애니메이션과 관련된 함수 다음에 문장을 실행하려면 콜백 함수를 사용하십시오.

좋은 웹페이지 즐겨찾기