如何在一段时间后重新加载 JQuery 脚本？

Question

我有一个带有 JQuery 的网页，它读取 json 文件并在网页上显示标签，还为用户提供手动添加标签的可能性。 下面是java脚本：

$(document).ready(function() {
        setInterval(function, 2000);
        $.getJSON('https://api.myjson.com/bins/1058x', function(res){
        $.each(res.data, function(key, val){
        $("<span class='tag label label-info'><span>"+val.tag+"</span><span class='glyphicon glyphicon-remove-sign'></span></span>").appendTo('.list')
        });
    }); 

        $('#addButton').click(function() {
            var toAdd=$('input[name=checkbox]').val();
            var tag = "<span class='tag label label-info'><span>"+toAdd+"</span><span class='glyphicon glyphicon-remove-sign'></span></span>"
            $(tag).appendTo('.list');
        });


        $('.list').on('click','span',function() {
            $(this).parent().remove();
        });

    });

下面是 HTML 代码：

<div class="jumbotron" style="border: 1px solid">
        <h2 class="text-center">Tag suggestions:</h2>
        <div class="row">
          <p><br></p>
          <div class="col-md-3 col-lg-3 text-center">
          Refresh Rate:
          </div>
          <div class="col-md-7 col-lg-7 pull-left">
          <input type="range" min="0" max="60" step="1" value="30" style="width:85%" onchange="updateTextInput(this.value);" />
          </div>
          <div class="col-md-2 col-lg-2 pull-left">
          <input class="text-center" id="rangeValue" type="text" value="30" style="width:25%;border:2px solid #456879; border-radius:4px;" /> &nbsp; Minutes
          </div>
          </div>
          <br><br>
          <div class="text-center">
          <div class="list">
          </div>
          </div>

          <br><br>
          <div class="text-center">
          <form id="tagInput">
          <input type='text' name='checkbox' style="border:2px solid #456879; border-radius:10px; height: 26px; width: 230px;"/>
          </form>
          <br><br>
          <button id="addButton" class="btn btn-primary">Add New</button>
          </div>
      </div>
    </div> <!-- /container -->

我还创建了一个jsFiddle here。 我现在想要每两分钟刷新一次 javascript。这样它就可以每两分钟读取一次文件并再次显示标签，而无需一次又一次地重新加载页面，而只是标签。我会非常感谢您的帮助。

谢谢。

Answer 1

这应该可行。

window.setInterval(function(){
  /// call your function here
}, 120000);

Answer 2

我更新了你的脚本：

var load = function () {
    $.getJSON('https://api.myjson.com/bins/4skih', function (res) {
    $.each(res.data, function (key, val) {
        addTag(val.tag, key);
    });
  });
};

var init = function () {
    load();
	
    $('#addButton').on('click', function () {
        var $input = $('input[name=checkbox]');
        var toAdd = $.trim($input.val());
        if (toAdd !== '') { // check value.
            addTag(toAdd);
            $input.val(''); //clear input after add.
        }
    });
    $('.list').on('click', 'button', function () {
        $(this).parent().remove();
    });
  
    setInterval(load, 2000 * 60); // Loading data each 2 min.
};

$(document).ready(init);

// Add tag to html.
var addTag = function (tag) {
    $("<div><button class='tag'>" + tag + "</button></div>").appendTo('.list');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
		  <div class="list">
		  </div>
		  </div>
           
          <br><br>
          <div class="text-center">
          <input type='text' name='checkbox' />
          <br><br>
          <button id="addButton" class="btn btn-primary">Add New</button>
          </div>

Answer 3

如果你想定期获取数据，我猜你想这样做：

$(document).ready(function () {
  setInterval(function () {
    $.getJSON('https://api.myjson.com/bins/1058x', function (res) {
      $.each(res.data, function (key, val) {
        $("<span class='tag label label-info'><span>" + val.tag + "</span><span class='glyphicon glyphicon-remove-sign'></span></span>").appendTo('.list')
      });
    }, 1000 * 120);
  });
});

文档准备好后，您每 2 分钟调用一次函数。