在一段时间内显示图像和脚本答案

【问题标题】：display image and script for a set period of time在一段时间内显示图像和脚本
【发布时间】：2011-02-14 21:14:25
【问题描述】：

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

$('#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);
  }

  Refresh();

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

【问题讨论】：

你想显示还是执行一些JS代码？
我不明白。您已经有一个仅在单击链接时运行的函数（上图）。您是否有理由无法在该功能中执行您需要的操作？它要做什么？
那么，您的“按钮”基本上可以打开/关闭自动刷新？并且单击它“on”应该将其打开 15 秒，此时它会自动停止刷新（并且#myImg 会回到原来的 src）？
是的，就是这样。

标签： php javascript jquery timeout

【解决方案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;
  });

【讨论】：

我试过这个，我觉得它真的很接近工作。但不完全是。我必须澄清。上面代码中的“#myLink”是围绕“旧图像”的锚标记。因此，您单击静态图像，然后将其替换为实时网络摄像头。 feed，即 webcam/image.jpg...基本上“newImg.jpg”就是这个网络摄像头图像。然后在 15 秒后，原来的“旧图像”静态图像又出现了，你可以再次点击它……等等……这有意义吗？
好吧，只要您的Refresh() 函数正常工作，这似乎是正确的。我将在click 事件的底部添加一行。那是return false;，这样锚就不会尝试加载页面。有什么特定的东西在这里不起作用吗？您的Refresh() 是否每 0.5 秒被呼叫一次？

【解决方案2】：

比如：

var original_url = '';
var second_url = 'http://example.com/path/to/image.jpg';
var delay_in_milliseconds = 15000

function resetImage() {
    $('#myImg').attr('src', original_url);
}

$(document).ready(function () {
    original_url = $('#myImg').attr('src');
    $('#myImg').attr('src', second_url);
    setTimeout(resetImage, delay_in_milliseconds)
});

假设这个标记：

<img id="myImg" src="another/path/to/another/image.jpg" />

我想我理解您的问题，但如果您认为需要，请随时修改。

【讨论】：

我遇到的问题是我上面的（在我的问题中）javascript 在显示原始图像时正在运行，但我只希望它在显示 15 秒的新图像时运行。跨度>
我不太了解您的事件发生的顺序和频率。令人困惑。 :-(
对不起，我解释得很糟糕。这就是我需要做的，一步一步 1）用户来到页面，有一个静态图像，上面写着“点击这里查看网络摄像头” 2）用户点击图像 3）图像被实时网络摄像头图像替换，即我的问题中的第二个脚本每 0.5 秒刷新一次。 4) 15 秒后，实时网络摄像头恢复为静态图像，显示“单击此处查看网络摄像头”。只有在 15 秒的时间间隔内，我才希望网络摄像头刷新脚本运行，否则会浪费带宽甚至显示。很抱歉混淆了

【解决方案3】：

这可能取决于代码的作用。

不要考虑页面来源。考虑 DOM。

您要注入的 javascript 很可能会处理某种事件（它是一个事件处理程序）。因此，在初次点击时，您希望将该函数绑定（附加）到正确的事件，然后在 setTimeout 函数中取消绑定。

如果您不尝试启用/禁用某些行为，那么我们可以使用有关您的此临时 javascript 正在做什么的更多信息来提供更好的指导。

【讨论】：