أرقام متحركة (شبه العد التنازلي) مع JQuery؟

Question

أحاول إنشاء قيمة عددية، على سبيل المثال 5000، ثم تتغير بسرعة إلى قيمة أخرى، على سبيل المثال 4000، باستخدام JQuery.الآن أفعل هذا بشكل جيد باستخدام:

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

عندما قمت بتشغيل الكود الذي قدمته، وجدت نفسي في حلقة لا نهائية.في نهاية حلقة القيام، لديك

current_value = parseInt(numb);

ولكن يتم تعيين قيمة خدر فقط في بداية الوظيفة، لذلك يستمر إلى الأبد.إذا قمت بتغيير ذلك إلى

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

ثم أنه يعمل بشكل جيد.باستثناء أنه يبدو أنه يحدث على الفور.

لقد اخترقت طريقة لتحقيق الرسوم المتحركة باستخدام المهلات التي يبدو أنها تعمل بشكل جيد إلى حد ما، ولكن بما أنني لا أزال جديدًا إلى حد ما في جافا سكريبت، فلا أعرف ما إذا كان هناك نهج أكثر كفاءة أم لا.ما عليك سوى تعديل المعلمة الثانية التي تم تمريرها إلى 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 2

ما تفعله هنا هو تحديث DOM عدة مرات في تتابع سريع.ونتيجة لذلك، سينتظر المتصفح حتى تنتهي من جميع التغييرات، وعندها فقط سيعيد رسم الصفحة.لذلك، لن تتمكن من رؤية أي تغيير مرئي حتى ينخفض ​​الرقم إلى 4000.

نعم، أنت بحاجة إلى استخدام setTimeout أو setInterval / clearInterval.أو، لتوضيح التعليمات البرمجية، يمكنك استخدام jQuery "الانتظار" البرنامج المساعد:

// (code to get new value goes here)

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

بدلاً من html(), ، لقد استخدمت text(), ، حيث يبدو أنك لا تحتاج إلى تغيير أي بنية HTML.

Answer 3

يعجبني أسلوب thorn مع setTimeout، لكني سأختصره في وظيفتين وأبدأ تشغيله بعد تحميل النافذة للتأكد من تحميل الصفحة قبل تحديث العداد:

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() بقيمة أعلى من targetVal في حالة 'add' أو أقل من targetVal في الحالة الأخرى.يجب عليك التأكد من عدم حدوث ذلك قبل إجراء استدعاء الوظيفة.