설정된 시간 동안 이미지 및 스크립트 표시

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 컨텍스트에서이 스크립트가 작동하도록 만드는 방법을 모르겠습니다.

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

Answer 2

아마도 코드에 따라 다릅니다.

페이지 소스에 대해 생각하지 마십시오. DOM의 관점에서 생각해보십시오.

삽입하려는 javascript가 일종의 이벤트 (이벤트 핸들러)를 처리 할 가능성이 있습니다. 따라서 처음 클릭 할 때 해당 함수를 해당 이벤트에 바인딩 (연결) 한 다음 setTimeout'd 함수에서 바인딩을 해제하려고합니다.

일부 동작을 사용/사용 중지하지 않으려는 경우 더 나은 안내를 제공하기 위해이 임시 자바 스크립트가 수행하는 작업에 대한 자세한 정보를 사용할 수 있습니다.

Answer 3

그래서 같은 :

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

내가 당신의 질문을 이해하는 것 같아요,하지만 당신은 그것을 필요하다고 생각하는 경우 그것을 수정 주시기 :

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

이 마크 업을 가정 .