Javascript 如果正在进行另一个jquery操作，则停止jquery操作

我有一个主页，其中包含两个页面，在面板中显示特定操作，第一个是用户登录网站时的视图

$(document).ready(function(e) {
            $.get("activePages.xhtml", function(data) {
                $(".parent-panel").append(data);
            });});

主页面包含一个按钮，单击该按钮可清除面板并附加第二页

$('.main-button2').click(function(e) {
                $(".parent-panel").empty();
                $.get("history.xhtml", function(data) {
                    $(".parent-panel").append(data);
                });
            });

---

我的问题是，第一页可能需要花费太多的时间来加载然后追加，因此，如果我单击按钮而没有给第一页加载时间，第一页和第二页都将被追加到彼此下面，如何停止此操作？

可能的解决方案是在需要时绑定click事件。如下图所示，我仅在添加页面后绑定click事件

$(document).ready(function(e) {
    $.get("activePages.xhtml", function(data) {
        $(".parent-panel").append(data);
        $('.main-button2').click(function(e) {
           $(".parent-panel").empty();
           $.get("history.xhtml", function(data) {
               $(".parent-panel").append(data);
           });
        });
    });
});

---

尝试在第一个脚本开始时使用.promise（）.done（）禁用按钮，并在完成后再次启用它。所以您需要等待第一页完全加载吗？在第一个附加上使用promise.done（）应该可以实现这一点，或者禁用按钮，正如@BhushanKawadkar所说的谢谢大家我会尝试一下，所以promise.done（）首先禁用按钮