Ajax-自动刷新混乱”;计数器”;

Ajax - Auto refresh messes up "counterup"

本文关键字:计数器 混乱 刷新 Ajax-      更新时间:2024-01-14

计数器脚本:(https://github.com/bfintal/Counter-Up)

        <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.counter').counterUp({
                delay: 100,
                time: 1200
            });
            $(".knob").knob();
        });
    </script>

自动刷新脚本:

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('jquery', '1.4.2'); 
        google.load('jqueryui', '1.8.8');
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            setInterval('get_counter()', 500);
        });
        function get_counter()
        {
            $('.refresh').load('user_counter.php');
        }
    </script>

HTML:

<h3 class="text-white"><b class="counter refresh">5</b></h3>

问题示例:https://gyazo.com/b7ad0d3ea86ca00d873f29b39124821e

我会使用$AJAX而不是加载$Ajax允许自定义回调函数

$.ajax({
    type: "POST",
    url: "user_counter.php",
    success:function(cntr){
        $('.refresh').html(cntr);
        $('.counter').counterUp({
            delay: 100,
            time: 1200
        });
    }
});