Question

我正在使用mousemove事件，并且每当可能执行时，我想优化它并考虑这两种可能性：

ok = true;

function mousemove(e)
{
    if(ok == true)
    {
        ok = false;
        window.setTimeout(function(){ ok = true; }, 1000/60);//60 FPS
        //Code here
    }
}

和

lastTime = +new Date();

function mousemove(e)
{
    if(+new Date() - lastTime > 1/60)//60 FPS
    {
        lastTime = +new Date();
        //Code here
    }
}

使用窗口间隔（或超时）或使用时间戳是否更好？

（如果你有另外一个想法，我会接受！）

谢谢！

Answer 1

在事件中，我只是更新变量（例如鼠标的位置），在第二个事件（例如requestAnimationFrame）中，我会读取该变量并重置它。因此，在下一个循环中，我检查它是否具有有效值并再次计算（导致用户进一步移动鼠标）或者仍然没有设置（导致用户没有进一步移动鼠标）。

let currentPosition = null;

function onPaint() {
    if(currentPosition !== null) {
        let paintPosition = currentPosition;
        currentPosition = null;

        // ToDo: update visualization by using paintPosition...
    }

    window.requestAnimationFrame(onPaint);
}

function onMouseMove(e) {
    currentPosition = e.position;        
}

onPaint();

Answer 2

使用间隔意味着具有每秒执行60次的功能，即使未使用鼠标也是如此。检查鼠标事件回调中是否已经过了正确的时间段仅在需要时执行。

所以我放弃间隔方法（超时相同）：

(function () {
    var time=+new Date();
    myElement.addEventListener('mousemove', function () {
        if (time- (+new Date()) < 60) return;
        time=+new Date();
        /* Here my logic*/
    });
})()

什么是最优化的

2 个答案: