php - 在设定的时间段内显示图像和脚本

Question

这与我前几天提出的问题非常相似，但我的页面代码变得更加复杂，我需要重新审视它。我一直在使用以下代码:

$('#myLink').click(function() {
  $('#myImg').attr('src', 'newImg.jpg');
  setTimeout(function() { $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);
});

单击链接时在设定的时间段(15 秒)内替换图像，然后在 15 秒后恢复为原始图像。

但是现在，我想在单击链接时也运行一段 javascript(除了替换图像)，并且仅在单击链接时(它与 15 秒图像相关)然后让 js 代码在 15 秒后也消失了……但是我不确定如何让 jquery 将 js 代码发送到页面中……基本上我只想让 jQuery 将这段代码“回显”到 15 下的页面上第二，当我在那里时，但我不知道 jquery 是如何格式化这个“echo ”的。

这个问题有意义吗？

  interval = 500;
  imgsrc = "webcam/image.jpg";

  function Refresh() {
     tmp = new Date(); 
     tmp = "?" + tmp.getTime();
     document.images["image1"].src = imgsrc + tmp;
     setTimeout("Refresh()", interval);
  }

  Refresh();

这是网络摄像头的脚本。基本上它每半秒拍摄一张新图片并在页面上替换它。你必须原谅我，我是 jquery 的新手，我不知道如何让这个脚本在 jquery 上下文中工作。

Answer 1

如果你想每隔一段时间运行一些东西，使用setInterval()，它类似于setTimeout()。

如果您将 setInterval() 分配给一个变量，您可以使用该变量来“清除”它。在您的 setTimeout() 函数中执行此操作。

$('#myLink').click(function() {
    // Start setInterval which runs a function every n seconds, and assign it to a variable
    var runningInterval = setInterval(function() {...}, 500);  

    $('#myImg').attr('src', 'newImg.jpg');

    // After 15 seconds, clear the runningInterval, and reset the image.
    setTimeout(function() { clearInterval(runningInterval); $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);
});

---

编辑:

好的，所以，这是您的代码。

  interval = 500;
  imgsrc = "webcam/image.jpg";

  // Is this function getting called?
  function Refresh() {
     tmp = new Date(); 
     tmp = "?" + tmp.getTime();

        // You could use jQuery here, just like below.
     document.images["image1"].src = imgsrc + tmp;
  }

  $('#myLink').click(function() {
      // Start setInterval which runs your Refresh function every 0.5 seconds, and assign it to a variable
      var runningInterval = setInterval(Refresh, interval);  

      // Display new image
      // This line may be unnecessary if the Refresh() function is loading it anyway.
      $('#myImg').attr('src', 'newImg.jpg');

      // After 15 seconds, clear the runningInterval, and reset the image.
      setTimeout(function() { clearInterval(runningInterval); $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);

      return false;
  });