Correctly delaying setTimeout

In the following function

function test1(n, delay) {
  for (let i = 0; i < n; i++) {
    setTimeout(() => {
      console.log(i)      
    }, delay)    
  }  
}

test1(3, 1000)

After 1 second, I immediately console.log 1, 2, and 3 simultaneously.

If I multiply delay by i,

function test1(n, delay) {
  for (let i = 0; i < n; i++) {
    setTimeout(() => {
      console.log(i)      
    }, i * delay)    
  }  
}

test1(3, 1000)

I console.log every i in my loop after 1 second. Why does this work?

Also, why does the code below

function test2(n, delay) {
  let promise = new Promise(resolve => setTimeout(() => {
    resolve()    
  }, delay))
  for (let i = 0; i < n; i++) {
    promise.then(console.log(i))  
  }  
}

test2(3, 1000)

immediately console.log 1, 2, and 3 simultaneously instead of waiting every second to console.log the next i value? Is there a way to console.log the next i value after waiting every second without using async and await?