Как предотвратить повтор в функции jQuery?

Question

У меня есть простая функция jQuery, как

$('.button').click(function(){
   $("#target").slideToggle().load('http://page');
});

По поведению slideToggle каждый клик вызывает слайд, но проблема в том, что он снова загрузит url.

Как ограничить выполнение функции load() только один раз, но slideToggle() при каждом нажатии. Другими словами, как предотвратить load() (только загрузка, а не всю функцию) при последующих щелчках?

Answer 1

$('.button')
    .on('click.loadPage', function() {
        $("#target").load('http://page');
        $(this).off("click.loadPage");
    })
    .on('click.slideToggle', function(){
        $("#target").slideToggle();
    });

и другой способ без глобальных переменных:

$('.button')
    .on('click', function() {
        if ( !$(this).data("loaded") ) {
            $("#target").load('http://page');
            $(this).data("loaded", true);
        }
        $("#target").slideToggle();
    });

Answer 2

Есть переменная (глобальная), которая говорит, была ли она загружена или нет. Например:

var loaded = false;
$('.button').click(function(){
   if(!loaded){
      $('#target').load('http://page');
      loaded = true;
   }
   $("#target").slideToggle();
});

Это приведет к тому, что slideToggle будет появляться при каждом нажатии, но страница загружается только один раз. :)

Answer 3

простой способ получить только последнее действие - использовать метод stop перед желаемым методом:

$('.button').click(function(){
   $("#target").stop().slideToggle().load('http://page');
});