設置一段時間的顯示圖像和腳本

Question

這與我前幾天詢問的問題非常相似，但是我的頁面代碼變得非常複雜，我需要重新訪問它。我已經使用以下代碼：

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

要設定的時間週期（15秒）鏈接被點擊時，然後在15秒後，恢復到原來的圖像替換圖像。

但是現在，我想運行一個JavaScript代碼片段，當鏈接被點擊（除了替換圖片），並且只有當鏈接被點擊（它與第15張圖片相關）和然後讓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環境下工作。

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函數中。

如果你不想啓用/禁用某些行爲，那麼我們可以使用更多關於你的臨時javascript是如何提供更好的指導的信息。

Answer 3

因此，像：

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" /> 

我想我理解你的問題，但隨時，如果你認爲它需要它來修改它。