jquery / javascript中重復/多次下載onkeyup事件

Question

如果我的輸入框通過paste()和keyup()包含URL（例如http://kotaku.com/some-article ），則我的CURL將獲取該特定網站的標題，描述和圖像，然后將其插入我的#content

郵政AJAX

$("input").on({
'paste': function() {
 var content;
    if (...) {
      $.post("curlfetch.php?url="+ url, {
      }, function(response){
      content = response;
      $('#content').html(response);
},
'keyup': function() {
    if (...) {
       $('#content').html(content);
    }
});

正在返回數據

<div id="image"><img src ... /> </div>
<div id="title"> some title... </div>
<div id="desc"> some text... </div>

我遇到的麻煩是在keyup()事件期間。

粘貼鏈接后，每當我鍵入內容時，它都會重復下載圖像。

因此，在發生paste()事件時，我得到了該數量的交易。 哪個是對的。

但是在我鍵入某些內容或激活keyup()事件的所有內容之后，它將再次下載圖像。 如果我在鏈接后繼續輸入，它將繼續下載。

這僅適用於圖像。 標題，說明似乎沒有這個問題。

因此，如果我刪除圖像div，並留下標題desc

 <!-- <div id="image"><img src ... /> </div> -->
    <div id="title"> some title... </div>
    <div id="desc"> some text... </div>

它工作正常。

對於每個keyup()事件，我只會重復下載圖像。 我如何防止這樣做，或者如何正確進行故障排除。

注意： var content; 用於存儲CURL返回的數據，只需在keyup()事件上訪問它即可。 因此，我不必再要求$post卷曲。

對不起，如果我的解釋有點含糊。

Answer 1

通過使用$('#content').html(content); 您一直在將圖像重新插入DOM。 根據您的瀏覽器和服務器設置，此緩存可能會或可能不會被緩存。

最壞的情況是不存在緩存，因此，由於$('#content').html(content);每次鍵調用都將重新下載圖像$('#content').html(content); 清空#content元素，然后將圖像重新寫入其中。

如果存在緩存，則仍然會重復調用該映像，但是在網絡檢查器工具中看不到下載數據的聚合。

理想情況下，您的應用程序不應在每次按鍵時都更新文檔片段圖像。 您應該找到一種方法，僅將絕對需要更新的元素作為目標，並檢查瀏覽器和服務器設置，以確保可以正確緩存圖像。