자바 스크립트/Jquery 애니메이션

Question

자바 스크립트와 jquery 라이브러리가 어떻게 작동하는지 조금 혼란 스럽습니다. 예. 클릭 이벤트에 내 이미지 변색 소스를 변경하고 다시 페이드 인하 고 싶습니다. 내 머리 속에서 이것이 작동해야한다고 생각했습니다. 하나의 코드를 실행 한 후 다음 코드를 실행합니다. 하지만 전환하고 코드를 실행하는 경향이 있습니다. 이 문제가 발생하는 이유와 해결책이 있는지 이해할 수 있도록 도와 줄 수 있습니까?

$('.under_box').click(function(){ 
var main_source=$(this).attr("src"); 
$("#main_image").fadeTo(300,0); 
$("#main_image").attr("src",main_source).queue(); 
$("#main_image").fadeTo(500,1); 

Answer 1

이러한 함수는 다음 코드 행이 시작되기 전에 완료되기를 기다리지 않는다는 점에서 비동기 경향이 있습니다. 이 같은 콜백 함수를 사용하여 시도 할 수 있습니다 :

$("#main_image").fadeTo(300,0, function(){ 
     $("#main_image").attr("src",main_source).queue(); 
     $("#main_image").fadeTo(500,1); 
    }); 

아이디어가 fadeTo이 완료되면 콜백 함수가 실행한다는 것입니다.

Answer 2

JavaScrypt는 차단하지 않는 것으로 알려져 있으므로이 경우 가장 좋은 방법은 무언가를 수행하기 위해 기다리는 경우 콜백을 설정하는 것입니다. 또한

$(function(){ 
    var main_image = $("#main_image"); 
    $('.under_box').on('click', function(){ 
     var main_source=$(this).attr("src"); 
     main_image.fadeTo(300,0, function(){ 
      main_image.attr("src",main_source); 
      main_image.fadeTo(500,1); 
     }); 
    }); 
}); 

, 당신이 모든 시간을 가져 오는 대신 메모리에 jQuery 오브젝트를 유지합니다 이런 식으로

var $main_image = $("#main_image"); 

을 절약 DOM으로 점프를 줄여야합니다 알 수 있습니다.