Javascript jQuery-防止其他；点击"；功能

我有一个简单的脚本，用户可以加载两个不同的容器，其中包含一些不同的内容

代码如下：

<div id="t-loader"></div>


<div class="media load-fixed active"> 
    Load Fixed
</div>
<br />
<div class="media load-extra"> 
    Load Extra
</div>



<br />
<div class="fixed-ads">
FIXED ADS IN HERE!!         
</div>


<div style="display: none;" class="extra-ads">
EXTRA ADS IN HERE!! 
</div>

问题是，每当有人单击

.load extra

和

.load fixed

时，这两个选项都会显示在页面中

我该怎么做，所以每当有人单击

.load extra

或

.load fixed

，只有一个会显示？

我在这里创建了一个jsFiddle:

---

在本例中，尝试依次快速单击“Load Extra”和“Load Fixed”-您将看到两个容器中的内容都会显示出来。

使用现有代码最简单的方法可能是保存setTimeout，并在每次单击按钮时清除它-

---

但是，在“真实”设置中使用setTimeout用于此UI目的是不常见的，因此如果这没有转移到实际用例中，我也不会感到惊讶。

使用现有代码的最简单方法可能是保存setTimeout，并在每次单击按钮时清除它-

---

但是，在“真实”设置中使用setTimeout用于此UI目的是不常见的，因此如果这没有转移到实际用例中，我也不会感到惊讶。

只需删除setTimeout并将所有代码放在其外部。可能的重复只需删除setTimeout并将所有代码放在其外部。可能的重复

$('.load-extra').click(function() {
    $(this).addClass('active');
    $('.load-fixed').removeClass('active');
    $('.fixed-ads').hide();
    $('#t-loader').show().html('loader');

    setTimeout(
      function() 
      {
        $('#t-loader').hide();
        $('.extra-ads').show();
      }, 2000);


});
$('.load-fixed').click(function() {
    $(this).addClass('active');
    $('.load-extra').removeClass('active');
    $('.extra-ads').hide();
    $('#t-loader').show().html('loader');
    setTimeout(
      function() 
      {
        $('#t-loader').hide();
        $('.fixed-ads').show();
      }, 2000);
});

var setTimer = null;
$('.load-extra').click(function() {
    $(this).addClass('active');
    $('.load-fixed').removeClass('active');
    $('.fixed-ads').hide();
    $('#t-loader').show().html('loader');

    clearTimeout(setTimer);
    setTimer = setTimeout(function(){
        $('#t-loader').hide();
        $('.extra-ads').show();
    }, 2000);


});
$('.load-fixed').click(function() {
    $(this).addClass('active');
    $('.load-extra').removeClass('active');
    $('.extra-ads').hide();
    $('#t-loader').show().html('loader');

    clearTimeout(setTimer);
    setTimer = setTimeout(function(){
        $('#t-loader').hide();
        $('.fixed-ads').show();
    }, 2000);
});