이미지를 표시하고 15 초 동안 스크립트를 실행하십시오.

Question

이것은 이전에 요청한 질문과 매우 유사하지만 페이지 코드가 훨씬 복잡해졌고 다시 방문해야합니다. 나는 다음과 같은 코드를 사용하고 :

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

시간의 집합 기간 (15초) 링크를 클릭하면,을 15 초 후, 원본 이미지로 되돌리려에 대한 이미지를 교체하려면.

그러나 지금은 (이미지를 바꾸는 것 외에) 링크를 클릭 할 때 링크가 클릭 될 때만 (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(); 웹캠 스크립트입니다. 기본적으로 30 초마다 새로운 사진이 찍히고 페이지에 바뀝니다. 당신은 나를 용서해야합니다, 나는 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 
});