Javascript 关闭DIV时取消Ajax请求

我有一些jquery，它被设计成在div打开时发出ajax请求。我所关心的是，ajax调用中可能会加载相当多的html，如果用户在使用切换按钮打开和关闭div时手忙脚乱，即使用户关闭了div，ajax请求仍然会继续

我的问题是,；我是否需要担心在关闭div时停止ajax请求，如果需要，如何将其绑定到正在关闭的div上

这是我的代码：

$（函数（）{
$（“#关闭”）。单击（函数（e）{
e、 预防默认值（）；
$（“#国家/地区幻灯片”）.slideToggle（）；
});
$（“#国家/地区链接”）。在（'click'，函数（e）{
e、 预防默认值（）；
var$link=$（此）；
//如果数据已加载，则退出
if（$link.data（'loaded'）==true）{
log（“不使用Ajax”）；
$（“#国家/地区幻灯片”）.slideToggle（）；
返回false；
}
$.ajax({
键入：“GET”，
数据类型：“html”，
url:“/echo/html/”，
超时：5000，
beforeSend:函数（）{
$（“#country_slide.content”）.html（“加载”
”）
},
成功：功能（数据、文本状态）{
log（'Fecthed with Ajax'）；
$（“#country_slide.content”）.html（数据）；
$（“#国家/地区幻灯片”）.slideToggle（）；
//如果成功，请在数据中绑定“已加载”
$link.data（'loaded'，true）
},
错误：函数（xhr、textStatus、errorshown）{
警报（“请求失败”）；
},
完成：函数（）{
},
});
});
});

看起来这就是我想要的，但我似乎无法将其正确绑定到开关上，只有在开关关闭时

谢谢您的帮助。

试试看

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
        if(loadxhr){
            loadxhr.abort();
        }
    });

    var loadxhr;
    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        loadxhr = $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
                loadxhr = null;
            },
        });
    });
});

$（函数（）{
$（“#关闭”）。单击（函数（e）{
e、 预防默认值（）；
$（“#国家/地区幻灯片”）.slideToggle（）；
if（loadxhr）{
loadxhr.abort（）；
}
});
var-loadxhr；
$（“#国家/地区链接”）。在（'click'，函数（e）{
e、 预防默认值（）；
var$link=$（此）；
//如果数据已加载，则退出
if（$link.data（'loaded'）==true）{
log（“不使用Ajax”）；
$（“#国家/地区幻灯片”）.slideToggle（）；
返回false；
}
loadxhr=$.ajax({
键入：“GET”，
数据类型：“html”，
url:“/echo/html/”，
超时：5000，
beforeSend:函数（）{
$（“#country_slide.content”）.html（“加载”
”）
},
成功：功能（数据、文本状态）{
log（'Fecthed with Ajax'）；
$（“#country_slide.content”）.html（数据）；
$（“#国家/地区幻灯片”）.slideToggle（）；
//如果成功，请在数据中绑定“已加载”
$link.data（'loaded'，true）
},
错误：函数（xhr、textStatus、errorshown）{
警报（“请求失败”）；
},
完成：函数（）{
loadxhr=null；
},
});
});
});

您可以中止请求，但服务器端请求仍将继续

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
        if(loadxhr){
            loadxhr.abort();
        }
    });

    var loadxhr;
    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        loadxhr = $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
                loadxhr = null;
            },
        });
    });
});