如何防止jQuery函数重复？

Question

I have a simple jQuery function as

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

By slideToggle behavior, every click cause a slide, but the problem is that it will load url again too.

How can I limit the load() function to be performed only once, but slideToggle() on every click. In other words, how to prevent load() (only load, not the entire function) in the subsequent clicks?

Answer 1

Have a variable (global) which says whether it has been loaded or not. Eg:

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

This will cause the slideToggle to occur on every click, but the page to load only the once. :)

Answer 2

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

and another way without global vars:

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

Answer 3

a simple way to get only the last action is to use the stop method before the desired method :

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