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

如果您想定期获取数据，我想您想要这样做：

$(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分钟调用一次。

Answer 3

我更新了你的脚本：

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>

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

3 个答案: