자바 스크립트 - 함수 내에서 $ (this)를 사용합니까?

Question

기본적으로 화면이 있으며 단추를 연결하면 화면이 위로 이동 한 다음 다른 화면이 나타납니다. 문제는 slideUp() 함수가 실행하는 데 시간이 걸리고 slideUp 함수가 실행 완료되기 전에 다른 화면이 표시된다는 것입니다. 다른 화면이 나타날 때까지 slideUp 기능이 실행될 때까지 다른 화면이 대기 할 수있게하려고합니다. 다음은 주요 자바 스크립트는 다음과 같습니다

$('#sidebar ul li a').click(function(){ 

    $('#sidebar ul .clicked').removeClass('clicked'); // when an <a> is clicked, remove .clicked class from any other <a>'s 

    $(this).addClass('clicked'); 

    hidePrevSlide(); //this calls slideUp in the current screen 
    $(this).showCurrentSlide(); //this shows another screen before hidePrevSlide is even finished executing/sliding Up 
}); 

내가

hidePrevSlide(function(){ 
    $(this).showCurrentSlide(); 
}); 

을 시도했지만 다음이 어떤 이유에 대한 코드를 나누기. 내가하는 일을 성취 할 수있는 방법이 있습니까?

Answer 1

이 시도 :

$('#sidebar ul li a').click(function(){ 

    $('#sidebar ul .clicked').removeClass('clicked'); // when an <a> is clicked, remove .clicked class from any other <a>'s 

    $(this).addClass('clicked'); 

    var current_slide=$(this); 
    hidePrevSlide(function(){ 
     current_slide.showCurrentSlide(); 
    }); 
    $(this).showCurrentSlide(); //this shows another screen before hidePrevSlide is even finished executing/sliding Up 
}); 

난 당신이 범위 지정 문제로 실행하는 것을 볼 수 있습니다. 함수 앞에 $(this)을 저장하면 아래 함수에서 해당 변수에 액세스 할 수 있습니다.

작은 최적화를위한

, 당신은 우리가 지금처럼 우리 current_slide 변수를 다시 사용할 수있는 여러 $(this)을 사용하지 않아야합니다 : 당신이 그것을

$('#sidebar ul li a').click(function(){ 
    var current_slide=$(this); 

    $('#sidebar ul .clicked').removeClass('clicked'); // when an <a> is clicked, remove .clicked class from any other <a>'s 

    current_slide.addClass('clicked'); 

    hidePrevSlide(function(){ 
     current_slide.showCurrentSlide(); 
    }); 
    current_slide.showCurrentSlide(); //this shows another screen before hidePrevSlide is even finished executing/sliding Up 
});