显示图像并运行脚本十五秒

Question

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

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

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

但是现在，我想在单击链接时（除了替换图像）以及仅在单击链接时（与 15 秒图像有关）运行 javascript 的 sn-p然后让 js 代码在 15 秒后消失……但是我不确定如何让 jquery 将 js 代码发送到页面中……基本上我只是想让 jQuery 将此代码“回显”到下面的页面上我在那里的 15 秒，但我不知道 jquery 如何格式化这个“回声”。

这个问题有意义吗？

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

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

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

对不起，我解释得很糟糕。这就是我需要一步一步发生的事情：

1. 用户来到页面，有一个静态图片显示“点击这里查看网络摄像头”
2. 用户点击图片
3. 图像被实时网络摄像头图像替换，我的问题中的第二个脚本每 0.5 秒刷新一次。
4. 15 秒后，实时网络摄像头恢复为静态图像，显示“单击此处查看网络摄像头”

只有在这 15 秒的时间间隔内，我才希望网络摄像头刷新脚本运行，否则它会在一个甚至没有显示的元素上浪费带宽。很抱歉造成混乱。

Answer 1

这应该可以为您解决问题...（尽管您可能可以尝试检测他们是否离开了页面（我无法就如何做到这一点给您任何建议））

var myLink = $('#myLink');
var myImg = $('#myImg');

myLink.click(function() {
   // makes sure this can only run once per 15sec
   myLink.attr('disabled', 'disabled');

   var start = new Date();
   var interval = null;

   function refresh() {
      var current = new Date();
      if (current.getTime() - start.getTime() > 15000) { // max time in miliseconds
          //stops refresh
          clearInterval(interval);

          // lets them click on the link again
          myLink.attr('disabled', '');

          // resets the old img
          myImg.attr('src', 'oldImg.jpg');
      } else {
          // should be obvious
          myImg.attr('src', 'webcam/image.jpg?t=' + current.getTime()); 
      }
   }

   // refreshes page
   interval = setInterval(refresh, 500);

   refresh(); // don't wait for the first 1/2 second
});