javascript - 如何使用 javascript/jquery 使用动态 json 数据无缝显示进度

Question

您好，我正在尝试显示动态数据的进度条

要求:从动态 json 获取数据并且需要使用从 0 到 100 的设置间隔每 x 秒调用一次 api 如果达到 100 那么我们需要停止进度并显示相同的下一页的进度或者如果用户按下我们需要停止进程。

注意:需要每 x 秒调用一次动态 json

我做了什么:

我每 x 秒创建一个进度，下面是代码

<div>

            <div class="container">
                    <hr>
                    <div class="progress" id="blips">
                      <div class="progress-bar" role="progressbar">
                        <span class="sr-only"></span>
                      </div>
                    </div>

                    <hr>
                    <hr>

                    <button class="btn btn-primary">Stop</button>

            </div>


    </div>

js

var data = {
    timer: {
        "num": "95.6",
        "perfection": "20",
}
}
$(document).ready(function(){

   loadData();

  });

  function loadData(){
    var timerId = 0;
    var ctr=0;
    var max= data['timer']['perfection'];

    timerId = setInterval(function () {
      // interval function
      ctr++;
      $('#blips > .progress-bar').attr("style","width:" + ctr*max + "%");

      // max reached?
      if (ctr==max){
        clearInterval(timerId);
      }

    }, 500);


  }

  $('.btn-primary').click(function () {
    clearInterval(timerId);
  });

Answer 1

做了一些改变:

1. 变量data应该在里面声明

   函数 loadData() {...}

   或作为参数传入

2. 设置进度条宽度的jquery语句应该是

   $('#blips > .progress-bar').css("width", ctr + "%");

有了这个改变，它就可以工作了。看 fiddle

https://jsfiddle.net/rahulsalvi2k7/eapgd4rc/11/