基於用戶在文本框中輸入的內容加載圖像

Question

嗨，我在這裏有一個有關在本地存儲器上加載現有圖像的工作腳本。

它是如何工作的： 起初div有一個默認的圖像來表示圖像將在那裏加載，以便 如果名字被鍵入，然後它會顯示在該分區的形象，如果該名稱存在

存在的問題是： 它加載正確的圖像，但是當一個用戶正在鍵入它變成這樣

在div部

但用戶輸入完成後，它加載正確的圖像

這裏是我的代碼：

JS

//setup before functions 
var typingTimer;    //timer identifier 
var doneTypingInterval = 5000; //time in ms, 5 second for example 

//on keyup, start the countdown 
$('#email').keyup(function(){ 

    clearTimeout(typingTimer); 
    var email = $('#email').val(); 
    $('#ico-pro').html('<img src="temp/users/'+email+'.jpg">'); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 

}); 

//on keydown, clear the countdown 
$('#email').keydown(function(){ 
    clearTimeout(typingTimer); 

}); 

//user is "finished typing," do something 
function doneTyping() { 
    var email = $('#email').val(); 
    $('#ico-pro').html('<img src="temp/users/'+email+'.jpg">'); 
} 

我的HTML文件

<figure class="uk-thumbnail"> 
     <div id="ico-pro" class="ico-profile"><img src='temp/users/user-pic.jpg' width=75 height=75 /></div> 
     </figure> 
     <fieldset class="email"> 
     <input type='text' id='email' value=""> 
     </fieldset> 

Answer 1

可你把它放在一個演示，所以我們可以玩它

在我看來你目前的邏輯是

keydown -> clearTimer 
keyUp  -> clearTimer(again, in case key isnt released) 
       >>>>> you've change the dom here as well... <<<< 
       setTimer 
idle(5000) -> execute done(change dom) 

1 - 你KEYUP功能，clearTimer和SetTimer的之間，你已經開始從輸入搶到未完成的價值，並追加到img.src

2 - 我想說刪除clearTimer在使用keyUp，其複製

3 - 你需要明確在你typingTimer變量（）完成

4 - 你應該把一個虛擬或加載圖像，並使用Ajax來加載圖像，如果失敗...我們顯示假人，如果它返回圖像，顯示th e圖像，這樣你就不必擔心計時器，除非你不需要加載ajax調用。