[JavaScript case] js prints a value in the array every second?

Note that here is var i=0;   

    <script>
      var arr = ['1', '2', 'a', 'b', 'cde', '888']
      for (var i = 0; i < arr.length; i++) {
        setTimeout(function () {
          console.log(arr[i])
        }, 1000 * i)
      }
    </script>

At this point, the console prints the following image:

---

Note that here is let i=0;

    <script>
      var arr = ['1', '2', 'a', 'b', 'cde', '888']
      for (let i = 0; i < arr.length; i++) {
        setTimeout(function () {
          console.log(arr[i])
        }, 1000 * i)
      }
    </script>

let i=0; the console displays the following effects 

 If the time 1000*i after the setTimeout method in the code is changed to 1000, all the information in the array will be printed within one second, and the effect is as follows