Question

我正在尝试使用JQuery创建一个数值，比如5000，快速更改为另一个值，比如说4000。现在我用这个很好：

mod(".class",4000,"add");

function mod(id,value,type){
    var numb = $(id).html();
    var current_value = parseInt(numb);
    do {
        if(type == "add")
            increment(id);
        else
            decrement(id);
        current_value = parseInt(numb);
    }while(current_value != value);

    function decrement(id){
        $(id).html(current_value-1);
    }

    function increment(id){
        $(id).html(current_value+1);
    }
}

我知道这可能不是解决问题的最佳方式，但我需要做的是从当前值到设定值很快倒数（或向上）数字。我使用这种方法的意图是使用setInterval或setTimeout延迟，但是这会使整个脚本失败得非常糟糕。

任何建议都表示赞赏，但我不想在这个看似简单的任务中使用大插件。

Answer 1

您在这里做的是快速连续多次更新DOM。因此，浏览器将等待您完成所有更改，然后才会重新绘制页面。因此，在数字一直下降到4000之前，您不会看到任何视觉变化。

是的，您需要使用setTimeout或setInterval / clearInterval。或者，为了清晰代码，您可以使用jQuery "wait" plugin：

// (code to get new value goes here)

$('.class').wait(100, function(){
    $(this).text(newValue);
});

我使用html()而不是text()，因为看起来您不需要更改任何HTML结构。

Answer 2

当我运行你提供的代码时，我陷入了无限循环。在do循环结束时，你有

current_value = parseInt(numb);

但是numb的值只在函数的开头设置，所以它会永远持续下去。如果您将其更改为

current_value = parseInt($(id).html());

然后它工作正常。除了它似乎立即发生。

我修改了一个方法，使用似乎运行得相当好的超时来实现动画，但是因为我仍然是javascript的新手，我不知道是否有更高效的方法。只需调整传递给setTimeout的第二个参数即可获得所需的速度。如果要更改增量/减量值，只需更改dir的减速度。

function mod2(id, value) {
    var numb = $(id).html();
    var current_value = parseInt(numb);

    // determine direction to go
    var dir = 1;
    if (current_value - value > 0) {
        dir *= -1;
    }
    getThere(id, current_value, value, dir);
}

function getThere(id, current_value, target_value, dir) {
    current_value += dir;
    $(id).html(current_value);
    if (current_value != target_value) {
        setTimeout("getThere('"+id+"',"+current_value+","+target_value+","+dir+")", 10);
    }
}

Answer 3

我喜欢使用setTimeout的thorn方法，但我会将其压缩为2个函数并在窗口加载后启动它以确保在更新计数器之前已加载页面：

var counterTimeout = 10; // time between increments in ms
$(window).load(function() {
    mod('class', 'add', 4000);
});

function mod(class, type, targetVal) {
    var $class = $(class);
    var numb = parseInt($class.html());
    numb = (type == 'add') ? numb + 1 : numb - 1;
    $class.html(numb);
    if (numb != targetVal) {
        setTimeout('mod("' + class + '","' + type + '",' + targetVal)', counterTimeout);
    }
}

如果$ class.html（）在“add”的情况下以高于targetVal的值开头，或者在另一种情况下低于targetVal，则不满足基本情况。您必须确保在进行函数调用之前不会发生这种情况。

使用JQuery的动画数字（半倒计时）？

3 个答案: