display image and script for a set period of time

Question

This is very similar to a question I asked the other day but my page code has become significantly more complicated and I need to revisit it. I've been using the following code:

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

To replace an image for a set period of time (15 seconds) when the link is clicked, then after 15 seconds, revert to the original image.

However now, I'd like to run a snippet of javascript as well when the link is clicked (in addition to replacing the image), and only when the link is clicked (it's related to the 15 second image) and then have the js code disappear as well after the 15 seconds...however I'm not sure how to have jquery send js code into the page...Basically I just want jQuery to "echo" this code onto the page underneath the 15 second while I am there, but I don't know how jquery formats this "echo".

Does this question make sense?

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

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

  Refresh();

It's script for a webcam. Basically it takes a new picture every half a second and replaces it on the page. You must forgive me, I'm new to jquery, I don't know how to make this script work in a jquery context.

Answer 1

It probably depends on what the code does.

Don't think in terms of the page source. Think in terms of the DOM.

It's likely that the javascript you want to inject handles some kind of event (it's an event handler). So on the initial click, you want to bind (attach) that function to the proper event, and then unbind it in the setTimeout'd function.

If you're not trying to enable/disable some behavior, then we could use more information about what your this temporary javascript is doing to provide better guidance.

Answer 2

If you want to run something at an interval, use setInterval(), which is similar to setTimeout().

If you assign setInterval() to a variable, you can use that variable to "clear" it. Do that in your setTimeout() function.

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

---

EDIT:

Ok, so, here it is with your code.

  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;
  });

Answer 3

So something like:

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)
});

Assuming this markup:

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

I think I'm understanding your question, but feel free to revise it if you think it needs it.