如何防止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();
    });

Answer 3

获取最后一个动作的简单方法是在所需方法之前使用stop方法：

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