Question

我创建了一个简单的模型，其中弹出了一个图像。图像来自现场摄像头，我需要每两秒更新一次。

我尝试做的是使用setInterval来刷新模态中的URL，但我遇到了一些问题。

1当我弹出模态窗口时，我似乎无法在html中找到URL src。 2我不确定这是最好的技术，因为窗口会保持打开和关闭。

到目前为止，这里有更多代码。

HTML LINK

 <div class="img camera" id="18"><div class="desc">
        City<br>Street @ EXIT</div> <br> <img class="livecamera" src="http://url-i-want-refesh.jpg" border="0"><br> time stamp</div>

代码开放模式

    $("#links").on("click", ".camera", function(e){
      e.preventDefault()
      camera = $(this).html();
      $('#basicModal').modal('show');
      $("#basicModal .modal-body").html(camera);
    });

HTML MODAL

 <div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <h3>Modal Body</h3>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

JAVASCRIPT I＆＃39; M尝试工作

$('body').on('shown.bs.modal', '.modal', function (e) {
    //Get the URL in the Modal
    url = $(this).find('.livecamera').attr('src');
    // refresh it every two seconds
    setInterval(function(){
        $(this).find(".livecamera").attr("src", url+new Date().getTime());
        console.log('update');
    },2000);

})

我很感激有关如何最好地解决此问题的任何建议/提示。提前致谢

Answer 1

尝试一下：

var interval = null;
$("#links").on("click", ".camera", function(e){
  e.preventDefault();
  // get the camera source
  var camera = $(this).html();
  var url = $(this).find('.livecamera').prop('src');
  $("#basicModal .modal-body").html(camera);
  clearInterval(interval);

  $('#basicModal').modal('show').off('shown.bs.modal').on('shown.bs.modal', function(){
    var $this = $(this);
    interval = setInterval(function(){
      $this.find('.livecamera').attr("src", url+new Date().getTime());
      console.log('update');
    }, 2000);
  });
});

在查看我的初步建议之后，它多次附加事件监听器，这可能是新问题的原因。我已经更新了代码，以便在添加之前删除以前的事件侦听器。

如何在Bootstrap模式上附加setInterval

1 个答案: