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

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

工作原理： 首先，div有一个默认图像，表示将在那里加载一个图像 如果输入了名称，则会在该div上显示图像（如果该名称存在）

问题是： 它确实加载了正确的图像，但当用户键入div部分时，它会变成这样

但在用户完成输入后，它会正确加载图像

这是我的密码：

JS

我的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>   

---

你能把它放在演示上，这样我们就可以玩了吗

在我看来，你目前的逻辑是

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，它是复制的

3-您需要一个在“完成”中清除typingTimer变量

4-你应该建立一个虚拟的或正在加载的图像，如果失败的话，使用ajax来加载图像。。。我们显示虚拟对象，如果它返回图像，则显示图像，这样您就不需要担心计时器，除非您不希望加载ajax调用

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)