Question

我有一个简单的jQuery函数

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

按slideToggle行为，每次点击都会产生幻灯片，但问题是它会再次加载url。

如何限制load()功能仅执行一次，但每次点击slideToggle()。换句话说，如何在后续点击中阻止load()（仅加载，而不是整个函数）？

Answer 1

有一个变量（全局），表示是否已加载。 E.g：

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

如何防止jQuery函数重复？

3 个答案: