Question

I have a couple of fairly simple javascript functions which animate the transition of a number, going up and down based on user actions. There are a number of sliders on the page which within their callback they call recalculateDiscount() which animates the number up or down based on their selection.

var animationTimeout;

// Recalculate discount
function recalculateDiscount() {
    // Get the previous total from global variable
    var previousDiscount = totalDiscount;
    // Calculate new total
    totalDiscount = calculateDiscount().toFixed(0);
    // Calculate difference
    var difference = previousDiscount - totalDiscount;
    // If difference is negative, count up to new total
    if (difference < 0) {
        updateDiscount(true, totalDiscount);
    }
    // If difference is positive, count down to new total
    else if (difference > 0) {
        updateDiscount(false, totalDiscount);
    }
}

function updateDiscount(countUp, newValue) {
    // Clear previous timeouts
    clearTimeout(animationTimeout);
    // Get value of current count
    var currentValue = parseInt($(".totalSavingsHeader").html().replace("$", ""));
    // If we've reached desired value, end
    if (currentValue === newValue) { return; }
    // If counting up, increase value by one and recursively call with slight delay
    if (countUp) {
        $(".totalSavingsHeader").html("$" + (currentValue + 1));
        animationTimeout = setTimeout("updateDiscount(" + countUp + "," + totalDiscount + ")", 1);
    }
    // Otherwise assume we're counting down, decrease value by one and recursively call with slight delay
    else {
        $(".totalSavingsHeader").html("$" + (currentValue - 1));
        animationTimeout = setTimeout("updateDiscount(" + countUp + "," + totalDiscount + ")", 1);
    }
}

The script works really well for the most part however there are a couple of problems. Firstly, older browsers animate more slowly (IE6 & 7) and get confused if the user moves the slider again whilst it is still within the animation.

Newer browsers work great EXCEPT for on some occasions, if the user moves the slider mid-animation, it seems that it starts progressing in the wrong direction. So for updateDiscount() gets called with a new value and a directive to count up instead of down. As a result the animation goes the wrong direction on an infinite loop as it will never reach the correct value when it’s counting in the wrong direction.

I’m stumped as to why this happens, my setTimeout() experience is quite low which may be the problem. If I haven’t provided enough info, just let me know.

Thank you 🙂

Answer 1

OK think it’s fixed…

Refactored code a little bit, here’s final product which looks to have resolved bug:

var animationTimeout;

function recalculateDiscount() {
    var previousDiscount = parseInt(totalDiscount);
    totalDiscount = parseInt(calculateDiscount());
    if (($.browser.msie && parseFloat($.browser.version) < 9) || $.browser.opera) {
        $(".totalSavingsHeader").html("$" + totalDiscount);
    }
    else {
        if (previousDiscount != totalDiscount) {
            clearTimeout(animationTimeout);
            updateDiscount(totalDiscount);
        }
    }
}

function updateDiscount(newValue) {
    var currentValue = parseInt($(".totalSavingsHeader").html().replace("$", ""));
    if (parseInt(currentValue) === parseInt(newValue)) {
        clearTimeout(animationTimeout);
        return;
    }
    var direction = (currentValue < newValue) ? "up" : "down";
    var htmlValue = direction === "up" ? (currentValue + 1) : (currentValue - 1);
    $(".totalSavingsHeader").html("$" + htmlValue);
    animationTimeout = setTimeout(function () { updateDiscount(newValue); }, 5);
}

Will give points to both Ibu & prodigitalson, thank you for your help 🙂