0

我是 Javascript 新手，请多多包涵。

我有一个类似于下面的代码，每当我单击一个按钮时，它都会在一个 HTML 元素上执行一些动画，问题是，如果用户多次单击，动画将被缓冲并一次以巨大的延迟执行。

下面的代码“应该”通过禁用循环直到动画完成来解决问题，但事实并非如此。我不能过多地改变代码的结构，它必须或多或少地保持这种形式。

var processing = false;

$("p").click(function() {
  if (processing == false) {
    for (i=0; i<5; i++) {
      if (processing == false)
        processing = true;
      tastor();
    }
    processing = false;
  }
});


function tastor() {
  zubi = parseFloat($('p').css('font-size'));
  $('p').animate({'font-size': zubi+i}, 500);
}
4

2 回答 2

5

您可以使用:animatedjQuery 伪选择器提前中断，以防元素已经动画化：

$("p").click(function() {
  if ($(this).is(':animated')) return;

  // The rest of your normal code.
});

演示：http: //jsfiddle.net/MgmET/4/

于 2012-09-10T21:24:47.933 回答
0

“动画”可能会启动一个持续半秒的事件，但它实际上并不需要半秒来执行。因此，在下一次点击发生之前，每次点击的每个“tastor”调用都会很快执行。

解决此问题的一种方法是依赖 animate 的“完整”属性。您可以将一个函数传递给动画，该函数在动画完成之前不会执行。例如：

var processing = false;
var increment = 1;
function step (count) {
    if (count > 0) {
        tastor(function() { step(count - 1) });
    } else {
        processing = false;
    }
}
$("p").click(function() {
    if (processing == false) {
        processing = true;
        step(5);
    }
});
function tastor(callback) {
    zubi = parseFloat($('p').css('font-size'));
    $('p').animate({'font-size': zubi+increment}, 500, callback);
}

​</p>

于 2012-09-10T21:38:48.703 回答