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

Vídụt} ngtự：https://dribbble.com/shots

Answer 1

单击ajax-overlay时可以隐藏open-ajax并将其显示在成功回调中，这样可以确保在加载所有代码之前不会单击覆盖层：

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

我对javascript $ .get（URL，回调）有问题；

2 个答案: