javascript - 为什么在按下按钮之前启动功能？

我尝试在按下按钮后将方块向下移动。
为什么在按下按钮之前执行该功能？我该怎么办？

我尝试使用.onclick和.addEventListener方法。

    <div class="block" id="blockColor"></div>
    <button id="btn">Move</button>

    var pixel=0;
    function theLoop( i ){
      setTimeout( function() {
        document.getElementById("blockColor").style.top = pixel+"px";
        pixel++;
        if ( --i ){
          theLoop(i);
        }
      }, 50)
    }
    document.getElementById("btn").addEventListener( "click", theLoop(50))

我希望正方形在按下按钮后会向下移动，但是现在它向下移动而不单击。

最佳答案

我认为您应该只引用该函数，而不要调用它。

document.getElementById("btn").addEventListener("click", theLoop)

希望对您有所帮助。

-编辑-
如果仍然需要参数，请像下面这样包装theLoop函数：

document.getElementById("btn").addEventListener("click", () => theLoop( 50 ) )