将 Timber Framework 计数器与连续计数的 URL API 一起使用答案

【问题标题】：Using Timber Framework counter with a URL API that continuously counts up将 Timber Framework 计数器与连续计数的 URL API 一起使用
【发布时间】：2017-05-19 23:36:22
【问题描述】：

在这方面，我的 jquery 等技能是有限的。对于我们的网站，我们使用带有一些插件的木材框架。我想使用他们的计数器，但让计数器实时上升。如果可以的话请帮忙。先感谢您。在我写的 HTML 中，我希望计数器是实时的。我希望我已经提供了足够的信息。所以总而言之，我需要帮助的是我想使用木材框架样式并查看但让计数器是实时的，而不是停在一个数字上并成为一个非常基本的计数器。

HTML `

                        <div class="column width-4 offset-4 center">
                            <div class="counter-wrapper">
                                <p style="font-size:60px;" class="counter lead"><span class="stats-1" data-count-from="1300000" data-count-to="realtime" >1000000</span></p>
                                <p style="font-size:36px;" class="lead">Hotspots</p>
                            </div>
                        </div>

Javascript

<script>
    $( document ).ready( function(){
        $( '.stats-1' ).counter();
        $( '.stats-2' ).counter({
            autoStart: true
        });
    });
</script>

实时计数器网址 https://reelsonar-services.com/api/v1/hotspot_count

来自示例网站的我们的计数器

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />

<script>
    var hotspot_count = 1000000;

    function fetch_waterbody_count() {

        var url="https://reelsonar-services.com/api/v1/hotspot_count";
        //var url="http://reelsonar-services.com:8085/hotspot_count";

        var html = [];
        $.getJSON( url, function( data ) {
            console.log( data );
             $.each(data, function(index, d){
                 html.push("Hotspots: ", d.hotspot_count, "<br>");
                 var count = parseInt( d.hotspot_count );
                 if( count != hotspot_count) {

                     hotspot_count = count;
                     update_counter( hotspot_count )
                 }

             });


        });
    }

    function update_counter( count ) {

        jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
    }

    function reset_counter( count ) {

        jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
    }

            function pulse_hotspot() {
        (function pulse(back) {
        $('#hotspot_img').animate(
            {
            'font-size': (back) ? '25px' : '35px',
            opacity: (back) ? 1 : 0.5
            }, 1200, function(){pulse(!back)});
        $('#hotspot_img img').animate(
            {
            'width': (back) ? '125px' : '112px'
            }, 1200);
        })(false);
            }
</script>

<body style="background: lightblue;text-align: center">
    <script>
$(document).ready(function(){

    $("#fetchButton").click(function(event){

    fetch_waterbody_count();
});

    $("#addOneButton").click(function(event){
    hotspot_count += 1;
    update_counter( hotspot_count );
});

    $("#addTenButton").click(function(event){
    hotspot_count += 10;
    update_counter( hotspot_count );
});

    $("#resetButton").click(function(event){

    reset_counter(1000000);
});

    setInterval(fetch_waterbody_count, 2000);    
    pulse_hotspot();
});

 </script>
 <script>
 jQuery(function(){
 jQuery('#flipcountdown').flipcountdown({size:'md',tick:hotspot_count});  <!-- Medium sized -->
})
</script>

 <div style="font-size: x-large; padding-bottom: 1em">ReelSonar Global Hotspot Counter</div>
 <div style="font-size: large; padding-bottom: 1em">Displays Hotspots as they are created by our users in real time.</div>

    <pre>(Retrieves Hotspot count every two seconds)</pre>
    <div id="hotspot_img"><img src="hotspot.png" /></div>
</body>

</html>

【问题讨论】：

标签： javascript html api counter

【解决方案1】：

这是一个轮询问题：定期发送 Ajax 请求，获取最新的数字并显示在屏幕上（使用 Timber 的计数器添加动画效果）。

这是一个工作示例。请注意有点复杂，因为返回的数据是一个数组，而不是单个对象（需要处理一个数组中返回多个数字的情况）：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="lib/css/components/timber.css" />
</head>
<body>

<span data-count-from="1" data-count-to="1" id="counter"></span>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="lib/js/plugins/jquery.tm.counter.js"></script>
<script type="text/javascript">    
  $(function() {
    var queue = [];
    var url="https://reelsonar-services.com/api/v1/hotspot_count";
    var counter = document.getElementById('counter');
    var $counter = $(counter);
    var latestNum = null;

    getData(true);
    setInterval(function() {
      getData();
    }, 30000);

    function getData(init) {
      $.getJSON(url, function(data) {
        if (init) {
          var num = data.shift().hotspot_count;
          counter.dataset.countFrom = num;
          $counter.text(formatNumber(num));
        }
        queue = queue.concat(data);
        playCount();
      });
    }

    function playCount() {
      if (queue.length === 0) {
        return;
      }
      var countTo = queue.shift().hotspot_count;
      if (countTo && countTo === latestNum) {
        playCount();
      }
      latestNum = countTo;

      counter.dataset.countTo = countTo;
      $counter.counter();
      setTimeout(function() {
        counter.dataset.countFrom = countTo;
        if (queue.length > 0) {
          playCount();
        }
      }, 1000);
    }

    function formatNumber( number ) {
      return number.toString().replace( /(\d)(?=(\d{3})+$)/g, '$1,' );
    }
  });
</script>
</body>
</html>

【讨论】：

非常感谢您抽出宝贵时间来做这件事。对此，我真的非常感激。我让它与木材框架一起工作。当然，我的营销总监不高兴，因为它不刷新。我试着向她解释原因。所以问题是让ajax请求更新？我会做一些研究，看看我是否能解决这个问题，但如果你有任何解决方案，请告诉我。再次感谢你！！！
@MikePupo 欢迎您。 “无需刷新页面即可更新内容”不是问题，这是 Ajax 的主要优势。我认为您的营销总监需要的是：在内容更新时得到通知，否则用户将不知道号码已更改。为了解决这个“通知”问题，你可以在数字改变时添加一些动画，比如淡入淡出、调整文本大小等。
只是想确保它的正确性。现在它显示热点的真实数量，但数字是静态的，不会计数或刷新。我一直在试图弄清楚如何让它刷新，但我无法弄清楚。
对不起，我刚刚阅读了您的评论，所以计数器根本没有改变，它只是一个静态数字，我需要的是每次添加热点时改变的数字。这大约每 10 秒发生一次。如果你想看这里链接reelsonar.com/pages/test
如果每次添加热点时需要更改数字。您可以使用 WebSocket 等实时技术。或者，您可以使用简单的解决方案，将间隔设置为略大于 10 秒（例如 11 秒）