Javascript - 在函數內使用$（this）函數？

Question

基本上，有一個屏幕，如果你鏈接一個按鈕，屏幕向上滑動，然後出現另一個屏幕。問題是，slideUp（）函數需要一些時間才能執行，另一個屏幕出現在slideUp函數執行完畢之前。我希望它可以讓另一個屏幕等待，直到slideUp功能執行完畢，直到另一個屏幕出現。這裏是主要的Javascript：

$('#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)，您將可以在下面的函數中訪問該變量。

對於一個小的優化，你應該避免使用多個$(this)使我們可以重新使用我們的current_slide變量，像這樣：

$('#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 
});