jquery - jquery 显示加载图像，直到点击函数触发/执行内部函数

Question

项目列表视图开关有这个点击功能：

    $("#gal").click(function() {
        $("#gal").addClass("active");
        $("#list").removeClass("active");
        $("#mos").removeClass("active");
        $(".item_page_item").hide(0, function() {
            $(".item_page_itemlist").hide();
            $.cookie("theView", "g", { expires: 7, path: "/" });
            $(this).removeClass("mos");
            $(this).addClass("gal").show();
            $(".row").each(function() {
                $(".gal",this).eq(2).addClass("third");
                $(".gal",this).eq(1).addClass("snd");
            });
        });
        return false;
    });

单击时，您可以在列表视图、图库视图和网格视图之间切换。有时，如果您有很多项目，则需要 1-2 秒才能切换视图。

有没有办法在视图改变之前显示加载器或其他任何东西？

Answer 1

你没有做任何异步的事情，所以你为什么要使用回调超出了我的范围，因为每个方法都等待下一个方法完成，javascript是单线程的，你可以这样做：

$("#gal").on('click', function (e) {
    e.preventDefault();
    $('#loader').show();

    $("#gal").addClass("active");
    $("#list, #mos").removeClass("active");
    $(".item_page_item, .item_page_itemlist").hide();
    $.cookie("theView", "g", { expires: 7, path: "/" });
    $(this).removeClass("mos").addClass("gal").show();
    $(".row").each(function () {
        $(".gal", this).eq(2).addClass("third").end().eq(1).addClass("snd");
    });

    $('#loader').hide();
});