添加延迟以显示按钮上的加载GIF，然后关闭div（以加载结果）

Question

我想要一个按钮，单击该按钮会显示预加载的gif图像1秒钟，然后关闭用户已打开的div #sidefilter。

我已经能够使它们两个都独立工作，但是它们并没有按预期工作，我想我需要给#dismissiefilter添加一个延迟，然后在执行时结束加载GIF。

需要添加什么才能使上述操作发生？

$('.showloader').button();
$('.showloader').click(function() {
  $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});

$('#dismisssidefilter, .overlay').on('click', function() {
  $('#sidefilter').removeClass('active');
  $('.overlay').removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="profile-button text-white showloader" ng-click="callAllUni();" id="dismisssidefilter">See results</a>

工作链接： https://clearing.co.uk/dev/universities/

“搜索大学”输入字段旁边的过滤器按钮

Answer 1

我已经用代表您网站的演示更新了答案

$(function() {

  var devActions = function(str, clear) {

    let output = $('#dev-output');

    if (typeof clear === 'boolean' && clear === true) {
      output.empty();
    }

    output.append(' - ' + str + '<br />');
    console.log('devActions:', str);

  }

  $('#sidefilterCollapse').on('click', function() {

    var sidebar = $('#sidefilter');
    if (!sidebar.hasClass('active')) {

      sidebar.addClass('active');
      devActions('#sidefilterCollapse clicked', true);
      devActions('Adding .active class to #sidefilter');

      if ($('#sidefilter').hasClass('active')) {

        devActions('#sidefilter now has .active class');

      } else {
        devActions('somethings went wrong #sidefilter doesn\'t have .active class');
      }

    } else {

      devActions('#sidefilter already has .active class');

    }

  })

  $('.showloader').on('click', function(e) {

    e.preventDefault();
    var btn = $(this);

    // add .loading class so we can prevent spam click
    if (!btn.hasClass('loading')) {

      btn.addClass('loading');

      var saveOriginalText = $(this).html();
      var duration = 3000;

      btn.html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');

      if (btn.children('img').length) {
        devActions('.showloader clicked and image was added.');
      }

      btn.stop(true).animate({
        opacity: 1
      }, {
        duration: duration,
        start: function() {
          devActions('animation started');
        },
        complete: function() {

          devActions('animation done');

          // remove .loading class so we can make the button available again
          btn.removeClass('loading');


          btn.html(saveOriginalText);

          if ($(this).html() == saveOriginalText) {

            devActions('original button content was added on .showloader');

          }

          // do custom stuff after 1000ms

          $('#sidefilter').removeClass('active');

          if (!$('#sidefilter').hasClass('active')) {

            devActions('.active class has been removed from #sidefilter');

          }

        }

      })

    } else {

      devActions('---- don\'t spam click, currently loading ---');

    }


  });

})

body {
  overflow-x: hidden;
  font-family: "Segoe UI";
}

#sidefilterCollapse,
.showloader {
  padding: 3px 5px;
  line-height: 1rem;
  width: 100px;
  background: red;
  color: white;
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
}

#sidefilter {
  text-align: center;
  position: fixed;
  right: -200px;
  top: 0;
  padding: 15px 10px;
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  border-left: 1px solid lightgrey;
  box-shadow: -2px 0 13px 2px grey;
  transition: right 0.2s ease-in-out;
}

#sidefilter.active {
  right: 0;
  transition: right 0.2s ease-in-out;
}

#sidefilter p {
  text-align: left;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidefilterCollapse">
  Filter Button
</div>

<div id="sidefilter">

  <p>
    text text text text text text text text text
  </p>

  <a href="" class="profile-button text-white showloader" ng-click="callAllUni();" id="dismisssidefilter">See results</a>

</div>

<div id="dev-output"></div>