javascript - jQuery 计数器函数在 IE < 8 中不起作用

Question

我有一段简单的代码，我正在运行它以将计数器重复递增 1，直到达到一定数量。

代码在 Chrome/FF/IE9+ 上运行良好，但在 IE7/8 上它达到 £1.80 并停止运行。

我似乎找不到它的断点，但它显然运行了一定次数然后停止了。

主要功能是:

        (function($) {
            $.fn.countTo = function(options) {
                options = $.extend({}, $.fn.countTo.defaults, options || {});
                var loops = Math.ceil(options.speed / options.refresh_interval),
                    increment = (options.to - options.from) / loops;
                return $(this).each(function() {
                    var _this = this,
                        loop_count = 0,
                        value = options.from,
                        interval = setInterval(update_timer, options.refresh_interval);
                    function update_timer() {
                        value += increment;
                        loop_count++;
                        if(options.format == 'money') {
                            $(_this).html('\u00A3' + number_with_commas(value.toFixed(options.decimals)));
                        } else {
                            $(_this).html(value.toFixed(options.decimals));
                        }
                        if(typeof(options.on_update) == 'function') {
                            options.on_update.call(_this, value);
                        }
                        if(loop_count >= loops) {
                            clearInterval(interval);
                            value = options.to;
                            if(typeof(options.on_complete) == 'function') {
                                options.on_complete.call(_this, value);
                            }
                        }
                    }
                });
            };
            $.fn.countTo.defaults = {
                from: 0,  // the number the element should start at
                to: 100,  // the number the element should end at
                speed: 1000,  // how long it should take to count between the target numbers
                refresh_interval: 100,  // how often the element should be updated
                decimals: 2,  // the number of decimal places to show
                on_update: null,  // callback method for every time the element is updated,
                on_complete: null  // callback method for when the element finishes updating
            };
        })(jQuery);

例如:http://jsfiddle.net/yxEaN/

谢谢。

Answer 1

您的问题已针对 IE 解决。检查我下面的代码

function number_with_commas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

$.ajaxSetup ({
   // Disable caching of AJAX responses */
   cache: false
});

(function($) 
{
$.fn.countTo = function(options) {
    options = $.extend({}, $.fn.countTo.defaults, options || {});
    var loops = Math.ceil(options.speed / options.refresh_interval),
        increment = (options.to - options.from) / loops;
    return $(this).each(function() {
        var _this = this,
            loop_count = 0,
            value = options.from,
            interval = setInterval(function(){
                value += increment;
                loop_count++;
                if(options.format == 'money') {
                    $(_this).html('\u00A3' + number_with_commas(value.toFixed(options.decimals)));
                } else {
                    $(_this).html(value.toFixed(options.decimals));
                }
                if(typeof(options.on_update) == 'function') {
                    options.on_update.call(_this, value);
                }
                if(loop_count >= loops) {
                    clearInterval(interval);
                    value = options.to;
                    if(typeof(options.on_complete) == 'function') {
                        options.on_complete.call(_this, value);
                    }
                }

                },100);

    });
};

$.fn.countTo.defaults = {
    from: 0,
    to: 100,
    speed: 1000,
    refresh_interval: 100,
    decimals: 2,
    on_update: null,
    on_complete: null
};
})(jQuery);

$(function($) {
    $('#total_charity_counter').countTo({
    format: 'money',
    from: 0,
    to: 4229.01,
    speed: (4229.01 / 180),
    refresh_interval: .01,
    on_complete: function(value) {
    $(this).hide().fadeIn(1000);
}
    });
});