JavaScript设置delay不生效，文本转字母图片展示功能问题求助

问题根源 #

你的代码逻辑本身没有图片加载的问题，无法间隔展示的核心原因有两个：

• 同步执行的for循环会在几毫秒内跑完所有字符的处理逻辑，浏览器UI来不及刷新中间状态，最终只会展示最后一个字符对应的图片
• 如果你之前直接在for循环内调用setTimeout，会因为var声明的变量没有块级作用域，所有定时器拿到的都是循环结束后的最终值，导致逻辑失效

修复方案 #

我们用async/await实现最简单的间隔等待逻辑，新手也能快速理解和调整：

完整可运行代码 #

<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css" />
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <title>Image Changer</title>
  </head>
  <body>
    <input id="txt" name="txt" type="textbox" />
    <img id="image1" src="./multimedia/alphabets/0.jpg" style="width:100px">
    <!-- 去掉了原来无效的第二个传参 -->
    <button onclick="imagechange(document.getElementById('txt').value)">Button</button>

    <script type="text/javascript">
      // 封装延迟方法，参数是等待的毫秒数
      function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }

      // 给函数加async修饰，才能使用await语法
      async function imagechange(txt){
        var txt1 =  "";
        var imagefolderlocation = "./multimedia/alphabets/";        
        for (var i = 0; i < txt.length;i++) {
          txt1 = txt.charAt(i).toUpperCase();
          // 空格判断提前，避免空格去匹配不存在的" .jpg"
          if(txt1 == " " ) {
            document.getElementById('image1').src = imagefolderlocation + "Blank.jpg";
          } else {
            document.getElementById('image1').src = imagefolderlocation + txt1 +".jpg";
          }
          // 每展示一张图片等待1000毫秒（1秒），可以自己改数值调整间隔
          await sleep(1000);
        }
      }
    </script>
  </body>
</html>

参数调整 #

把代码里await sleep(1000)的1000改成你需要的数值即可调整每张图片的展示时长，单位是毫秒，比如填2000就是每张图片展示2秒。

内容的提问来源于stack exchange，提问作者Waseem