javascript - requestAnimationFrame 的问题

Question

我有一个问题:

document.querySelector('div').addEventListener('mousedown', function(){
        hello = true
        document.body.addEventListener('mousemove', function(e){
            if (hello) {
                document.querySelector('div').style.left = (e.clientX - 12.5) + 'px'
                document.querySelector('div').style.top = (e.clientY - 12.5) + 'px'
            }
        })
        this.addEventListener('mouseup', function(e){
            hello = false
            posY = Math.floor(parseInt(this.style.top))
            function Fall() {
                posY++
                document.querySelector('div').style.top = posY + 'px'
                if (posY != parseInt(window.innerHeight) - 25) requestAnimationFrame(Fall)
            }
            Fall()
        })
    })

body {
  margin:0;
  position:absolute;
  height:100vh;
  width:100vw;
  overflow:hidden
}

div {
  position:absolute;
  height:25px;
  width:25px;
  border:1px #000 solid;
  bottom:0
}
div:hover {
  cursor:pointer;
}

<div></div>

在此代码中 ( also on jsFiddle ，当我放下 div 时，我希望 div 掉落并停在地面上。

第一次成功。但是，requestAnimationFrame 更快，好像第一个没有完成...？在那之后，div 并没有停在地上 :(

我是否必须使用 setInterval 而不是 requestAnimationFrame？

Answer 1

每当单击 div(鼠标按下)时，就会分配另一个监听器。当你停止点击时，这些监听器都是按顺序执行的，所以在第二次点击时，会运行两个循环，第三次后会运行三个循环，依此类推。您可以只分配一次监听器:

var hello,posY;

document.querySelector('div').addEventListener('mousedown', function(){
  hello = true;
});

document.body.addEventListener('mousemove', function(e){
    if (hello) {
        document.querySelector('div').style.left = (e.clientX - 12.5) + 'px';
        document.querySelector('div').style.top = (e.clientY - 12.5) + 'px';
    }
});

document.querySelector('div').addEventListener('mouseup', function(e){
    hello = false;
    posY = Math.floor(parseInt(this.style.top));
    function Fall() {
        posY++;
        document.querySelector('div').style.top = posY + 'px';
        if (posY < parseInt(window.innerHeight) - 25) requestAnimationFrame(Fall);
    }
    Fall();
});

请始终以分号结束语句...