根据用户在文本框中键入的内容加载图像

Question

您好我在这里有一个关于在我的本地存储上加载现有图像的工作脚本。

工作原理： 首先，div有一个默认图像来表示图像将被加载到那里  如果输入了名称，那么如果该名称存在，它将在该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 - 我想说在keyUp中移除clearTimer，它是重复的

3 - 你需要在done（）

中清除你的typingTimer变量

4 - 你应该放置一个虚拟或加载图像，并使用ajax加载图像，如果失败...我们显示虚拟，如果它返回图像，显示图像，这样你不需要担心关于计时器，除非你不想加载ajax调用。