0

我有一些 jquery，旨在在 div 打开时发出 ajax 请求。我担心的是，在 ajax 调用中可能会加载相当多的 html，如果用户对打开和关闭 div 的切换按钮很感兴趣，那么即使在之后，ajax 请求仍然会继续用户已关闭 div。

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

这是我的代码：http: //jsfiddle.net/spadez/mz8Sm/1/

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

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

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

看起来这就是我所追求的，但我似乎无法将它正确绑定到切换开关上，只有在它关闭时。

http://api.jquery.com/ajaxStop/

感谢您提供的任何帮助。

4

1 回答 1

1

尝试

$(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;
            },
        });
    });
});
于 2013-06-07T09:01:40.227 回答