我對javascript $ .get（URL，回調）有問題；

Question

感謝您的支持！ - 抱歉，我的英語不好！

我使用此代碼從頁面條目中獲取DOM組件以顯示在主頁上。 當我單擊open-ajax ，它將從條目頁面加載DOM並顯示在ajax-outer ，當單擊ajax-overlay ，它將刪除DOM。

但是我發現了一個錯誤，如果單擊打開的ajax鏈接並立即單擊ajax-overlay ，則get ()仍將加載DOM並顯示在ajax-outer 。

看來ajax-overlay無法停止get ()如何優化代碼？

來自首頁的HTML：

<div class="main_content">
   <a class="open-ajax" href="/link/101">1</a>
   ...
   <a class="open-ajax" href="/link/10n">n</a>
</div>
<div class="ajax-wrap">
   <div class="ajax-overlay"></div>
   <div class="ajax-outer"></div>
</div>

來自條目的HTML：

<div class="coupon_content">
   <div class="abc">
   ....
   </div>
</div>

使用Javascript：

$('.main_content').on('click', '.open-ajax', function(e) {
    var gethref = $(this).attr('href');
    e.preventDefault();
    $('.ajax-wrap').addClass('active');
    $.get(gethref, function(sch) {
        $('.coupon_content', sch).each(function() {
            $('.ajax-outer').append($(this).html());
            $("body").addClass('noscroll');
        });
    });
});

$('.ajax-overlay').click(function(e) {
    $('.ajax-wrap').removeClass('active');
    $('.ajax-outer').children().remove();
    $("body").removeClass('noscroll');
});

視頻： https ://dribbble.com/shots

Answer 1

您可以在單擊open-ajax時隱藏ajax-overlay ，並將其顯示在成功回調中，這樣可以確保在加載所有代碼之前不會單擊該覆蓋：

$('.main_content').on('click', '.open-ajax', function(e) {
    e.preventDefault();

    var gethref = $(this).attr('href');
    $('.ajax-wrap').addClass('active');

    $('.ajax-overlay').hide();

    $.get(gethref, function(sch) {
        $('.coupon_content', sch).each(function() {
            $('.ajax-outer').append($(this).html());
            $("body").addClass('noscroll');

            $('.ajax-overlay').show();
        });
    });
});

Answer 2

您不能阻止ajax請求，但是可以使用全局變量阻止附加

var canAppend = true;
$('.main_content').on('click', '.open-ajax', function(e) {
    var gethref = $(this).attr('href');
    e.preventDefault();
    $('.ajax-wrap').addClass('active');
    $.get(gethref, function(sch) {
        if(canAppend) {
        $('.coupon_content', sch).each(function() {
            $('.ajax-outer').append($(this).html());
            $("body").addClass('noscroll');
             canAppend = true;
        });
        }
    });
});

$('.ajax-overlay').click(function(e) {
    $('.ajax-wrap').removeClass('active');
    $('.ajax-outer').children().remove();
    $("body").removeClass('noscroll');
    canAppend = false;
});