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
});

Javascript - 在函数内的函数中使用$（this）？

1 个答案: