Предотвращение .load (), если уже загружен?

Question

У меня есть несколько кнопок на странице. Каждая кнопка загружает отдельное частичное «представление» и использует метод jQuery .load ().

Это прекрасно работает, но я заметил, что, если я продолжаю нажимать на эту конкретную кнопку, он продолжает загружать частичный вид снова и снова, пока я не остановлюсь. Я уверен, что в итоге смогу вывести сайт из строя (ничего хорошего!).

Я пытался его кешировать (путем украшения метода и длительности контроллера и т. Д.), Но это не сработало Я подозреваю, что это потому, что я загружаю это представление нажатием кнопки.

Как я могу предотвратить повторение загрузки этого «представления», даже не подозревая об этом пользователя?

Это мой jQuery / Javascript:

//"Select Area" button - click event
    $(".btnAreaDiv .btn-myClass").click(function () {

        switch (this.id) {
            case "btnMyButton":
                    $('#myDiv').load('_MyPartialView'); //to-do: only load me, if I haven't been loaded?
                break;
            //more code etc., more button handling
        }
    }

Это содержимое _MyPartialView.cshtml:

@{
    Layout = null;
}

<div class="row">
    <div class="col-md-6">
        <div class="row" style="width:97%">
            <div class="col-md-12" style="border:2px solid #c5c5c5"><span id="lblMySelector">My Selector</span></div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>

<div class="row nopadding checkboxDiv mySelector">
    <div class="col-md-12 nopadding">
        <input id="myCheckBox" type="checkbox" /><label for="myCheckBox">Include all/label> <br />
    </div>
</div>

И, конечно, метод ActionResult в моем контроллере:

public ActionResult _MyPartialView()
{
    return View();
}

Я пробовал это, но это не сработало:

switch (this.id) {
    case "btnMyButton":
        if (!$('#lblMySelector').length) {

            console.log('label not found', $('#lblMySelector').length);

            $('#myDiv').load('_MyPartialView'); 

        }
        break;

Answer 1

Вы можете отключить кнопку при нажатии и включить при необходимости снова (например, когда данные были загружены). Вы также можете установить .data для нажатой кнопки, чтобы пометить, что была нажата кнопка, и больше не требуется загрузка.

    $(".btnAreaDiv .btn-myClass").click(function () {
    switch (this.id) {
        case "btnMyButton":
                if ($(this).data('loaded') == undefined) {
                    $(this).data('loaded', 1);
                    $('#myDiv').load('_MyPartialView');
                }
            break;
        //more code etc., more button handling
    }
}

Вы также можете использовать .attr, если хотите;)

Answer 2

Для кэширования данных вы можете использовать метод .clone (), как в этом ответе. Вы можете возражать против каждого возможного запроса, например.

var cache = {};

и после получения данных сохраните их в кэш-памяти var:

var cacher = function(name) {
    return function(response) {
        cache[name] = response;
    }
};

$("#myDiv").load('_MyPartialView', cacher('_MyPartialView'));

Answer 3

Предположим, у вас есть какая-то разметка, похожая на эту:

<button type="button" class="load-some-stuff" id="btnOne">One</button>
<button type="button" class="load-some-stuff" id="btnTwo">Two</button>
<button type="button" class="load-some-stuff" id="btnThree">Three</button>

И что вы делаете что-то вроде этого:

$(function(){

    $('.load-some-stuff').on('click', function(e){

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com');
            break;

            case 'btnTwo':
                $('#some-container').load('example.com');
            break;

            case 'btnThree':
                $('#some-container').load('example.com');
            break;
        }

    });

});

Если вы не хотите, чтобы это происходило более одного раза, используйте off, чтобы удалить событие нажатия кнопки:

$(function(){

    $('.load-some-stuff').on('click', function(e){
        // the current button
        var _this = $(this);

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnTwo':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnThree':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;
        }

    });

});

Вы можете изменить место использования функции выключения; Я поместил его в функцию обратного вызова для загрузки при вероятности сбоя загрузки (функция обратного вызова вызывается только для успешного кода ответа).