时间戳

首页 > 解决方案 > 用于显示从获取 API 对象生成的数字的 jQuery 中的计数器效果显示 isNaN 错误

javascript - 用于显示从获取 API 对象生成的数字的 jQuery 中的计数器效果显示 isNaN 错误

问题描述

我想显示使用 JSON 从 API 中获得的数字。我想在那里放置反效果，它显示“isNaN”。API URL 返回一个对象并将总数保存在 data.data 中有人可以帮我解决这个问题吗？

<p class="Count member-count" style="color:#BA1823; font-size: 40px;">
                <script>
                    $.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
                        var text = `${data.data}<br>`
                        $(".member-count").html(text);
                    });
                </script>
            </p>
            <script>
                $('.Count').each(function () {
                  var $this = $(this);
                  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 1000,
                    easing: 'swing',
                    step: function () {
                      $this.text(Math.ceil(this.Counter));
                    }
                  });
                });
            </script>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

问题是因为 AJAX 调用是异步的，所以each()包含动画逻辑的循环在请求完成并且元素有任何内容之前运行。p

要解决此问题，请将each()调用放在 AJAX 回调中：

<p class="Count member-count"></p>

$.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
  $(".member-count").html(`${data.data}<br>`);

  $('.Count').each(function() {
    var $this = $(this);
    jQuery({
      Counter: 0
    }).animate({
      Counter: data.data
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        $this.text(Math.ceil(this.Counter));
      }
    });
  });
});

.member-count {
  color: #BA1823;
  font-size: 40px;
}

还值得注意的是，您不应该将<script>标签放在 HTML 结构的中间。要么将它们放在 中，要么<head>放在</body>. 同样，不要将 CSS 规则放在内联style属性中。将它们放在外部 .css 文件中。这是一个带有完整纠正的 HTML 和 JS的jsFiddle 。

推荐阅读