0

divが開いているときにajaxリクエストを行うように設計されたjqueryがあります。私が懸念しているのは、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 に答える