0

全部，

我有一个“信用模块”（类似于游戏中的信用系统），当用户执行操作时，它会创建一个内部 div，其中包含要添加或减去的成本，以便用户可以看到最后一个操作的成本是多少。

问题：只要调用一次函数，一切正常，如果用户快速执行多个操作，则 setTimeout 函数（假设动画然后删除成本 div）不会执行。似乎该函数的第二个实例重置了第一个的 setTimeout 函数。

(function()
{

$("#press").on("click", function(){creditCost(50)});

function creditCost(x)
{
var eParent = document.getElementById("creditModule");
// following code creates the div with the cost
eParent.innerHTML += '<div class="cCCost"><p class="cCostNo"></p></div>';
var aCostNo = document.getElementsByClassName("cCostNo");
var eLatestCost = aCostNo[aCostNo.length - 1];
// following line assigns variable to above created div '.cCCost'
var eCCost = eLatestCost.parentNode;
// cost being assigned
eLatestCost.innerHTML = x;
$(eCCost).animate ({"left":"-=50px", "opacity":"1"}, 250, "swing");
// following code needs review... not executing if action is performed multiple times quickly
setTimeout(function()
{
    $(eCCost).animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function ()
    {
        $(eCCost).remove();
    })  
}, 1000);
}

})();

jsfiddle，请原谅 CSS

4

3 回答 3

2 
eParent.innerHTML += '<div class="cCCost"><p class="cCostNo"></p></div>';

是坏线。这会重置innerHTML您的元素，重新创建整个 DOM 并销毁在先前调用中引用的元素 - 让它们的超时失败。有关详细信息，请参阅“innerHTML += ...”与“appendChild(txtNode)”。既然有 jQuery，为什么不使用它呢？

function creditCost(x) {
    var eParent = $("#creditModule");
    // Create a DOM node on the fly - without any innerHTML
    var eCCost = $('<div class="cCCost"><p class="cCostNo"></p></div>');

    eCCost.find("p").text(x); // don't set the HTML if you only want text

    eParent.append(eCCost); // don't throw over all the other children
    eCCost.animate ({"left":"-=50px", "opacity":"1"}, 250, "swing")
          .delay(1000) // of course the setTimeout would have worked as well
          .animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function() {
               eCCost.remove();
          });  
}
于 2012-08-25T16:18:43.023 回答
1

您正在启动一个动画并安排一个超时来处理 DOM 元素，如果用户快速单击，这些元素将在该操作的中间被修改。您有两个选项可以解决此问题：

  1. 在第二次单击时添加新项目是安全的，这样它就不会弄乱以前的动画。
  2. 在开始新的动画之前停止以前的动画并清理它们。

您可以通过以下重写和简化代码来实现任一行为。您可以通过是否包含第一行代码来控制是否获得行为 #1 或 #2。

function creditCost(x) {
    // This first line of code is optional depending upon what you want to happen when the 
    // user clicks rapid fire.  With this line in place, any previous animations will
    // be stopped and their objects will be removed immediately
    // Without this line of code, previous objects will continue to animate and will then
    // clean remove themselves when the animation is done
    $("#creditModule .cCCost").stop(true, false).remove();

    // create HTML objects for cCCost
    var cCCost = $('<div class="cCCost"><p class="cCostNo">' + x + '</p></div>');
    // add these objects onto end of creditModule
    $("#creditModule").append(cCCost);

    cCCost
        .animate ({"left":"-=50px", "opacity":"1"}, 250, "swing")
        .delay(750)
        .animate({"left":"+=50px", "opacity":"0"}, 250, "swing", function () {
            cCCost.remove();
        });  
    }
})();

请注意，我从 更改setTimeout()为.delay()以便更容易停止所有未来的操作。如果您继续使用 setTimeout()，那么您需要保存从中返回的 timerID，以便您可以调用clearTimeout(). 使用.delay(), jQuery 为我们做这件事。

于 2012-08-25T16:16:52.487 回答
0

为可能想主要使用 javascript 的任何人更新了代码。Jsfiddle，请原谅 CSS。

function creditCost(x)
{
    var eParent = document.getElementById("creditModule");
    var eCCost = document.createElement("div");
    var eCostNo = document.createElement("p");
    var sCostNoTxt = document.createTextNode(x);
    eCCost.setAttribute("class","cCCost");
    eCostNo.setAttribute("class","cCostNo");
    eCostNo.appendChild(sCostNoTxt);
    eCCost.appendChild(eCostNo);
    eParent.insertBefore(eCCost, document.getElementById("creditSystem").nextSibling);
    $(eCCost).animate ({"left":"-=50px", "opacity":"1"}, 250, "swing");
    setTimeout(function()
    {
        $(eCCost).animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function ()
        {
            $(eCCost).remove();
        })  
    }, 1000);
}
于 2012-08-26T05:41:18.730 回答