I have a problem with javascript $ .get (URL, callback);

Question

Thanks for the support! - Sory, my english is bad!

I use this code to get the DOM component from the page entry to display on the homepage. When I click on open-ajax, it loads the DOM from the entrypage and display in ajax-outer, when clicked on ajax-overlay, it will delete the DOM.

But I discovered an error, if I clicked on an open-ajax link and clicked on ajax-overlay immediately, get () will still load the DOM and display in ajax-outer.

It seems that ajax-overlay is unable to stop get () How can I optimize the code?

Html from Homepage:

<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 from Entry:

<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ương tự : https://dribbble.com/shots

Answer 1

You can't prevent a ajax request but you can prevent the appending using a global variable

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

Answer 2

You could hide the ajax-overlay when you click open-ajax and show it in the success callback, this way you make sure that the overlay will not be clicked until all the code is loaded:

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