完成动画后，删除

Question

https://jsfiddle.net/gkvjv1z6/2/

我写了这个进度条功能，
我有一个问题 如果执行off函数，但是bar仍然会进行动画，如何等到上一个动画完成后再删除do target.find('.progressbar').remove();

var progressbar = (function() {
  var target = $('#container');

  var structure = `<div class="progressbar"></div>`;

  var style = {
    'position': 'fixed',
    'top': '0px',
    'z-index': '10000',
    'pointer-events': 'none',
    'width': '0px',
    'height': '3px',
    'background-color': 'red'
  };

  var repeatInterval;

  return {
    on: function() {
      if (target.attr('data-progressbar') == '1') {
        this.off();
      }


      target.attr('data-progressbar', '1');

      var el = $(structure).prependTo(target);
      el.css(style);

      repeatInterval = setInterval(function(){ 
        el.animate({width: '100%'}, 1000, function() {
          el.css({
            'width': '0px'
          });
        });
      }, 850);
    },
    off: function() {
      if (target.attr('data-progressbar') == '1') {
        target.attr('data-progressbar', '0');

        clearInterval(repeatInterval);

        // wait last animation done the remove
        target.find('.progressbar').remove();
      }
    }
  };
})();

progressbar.on();

setTimeout(function() {
  progressbar.off();
}, 4000);

Answer 1

animate()方法使用fx队列。然后，您可以使用promise() interface：

target.find('.progressbar').promise().done(function() {
   $(this).remove();
});

-jsFiddle-