如何防止 jQuery 函数中的重复？

Posted 2023-02-25

【中文标题】如何防止 jQuery 函数中的重复？

【英文标题】：How to prevent repeat in jQuery function?

【发布时间】：2012-01-03 13:28:12

【问题描述】：

我有一个简单的jQuery函数

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

由于slideToggle的行为，每次点击都会导致滑动，但问题是它也会再次加载url。

如何将load() 函数限制为只执行一次，但每次点击都执行slideToggle()。也就是说，在后续的点击中如何防止load()（只加载，而不是整个函数）？

【参考方案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();
    );

【参考方案2】：

有一个变量（全局）表示它是否已加载。例如：

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

这将导致每次单击时都会发生 slideToggle，但页面只加载一次。 :)

【参考方案3】：

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

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

【讨论】：

这仍然会导致负载发生在每个动作上。