如何防止jQuery函数重复？

Question

我有一个简单的jQuery函数

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

按slideToggle行为,每次点击都会导致幻灯片,但问题是它会url再次加载.

如何限制load()只执行一次的功能,但slideToggle()每次点击都要限制.换句话说,如何load()在后续点击中防止(仅加载,而不是整个功能)？

Answer 1

有一个变量(全局),表示它是否已被加载.例如:

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

这将导致slideToggle在每次单击时发生,但页面只加载一次.:)

Answer 2

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