javascript - 如何为基于公式定位元素的函数正确设置计时器？

Question

我有一个定位页面元素的功能。例如：

refresh_positions = function(){
    set_pos(arrow_div,mouse_x,mouse_y);
    set_pos(title_tiv,window_width/2,20);
};

显然，这必须尽可能快地连续运行，以使元素始终正确定位。但是怎么做？

如果我设置一个快速计时器setInterval(refresh_positions,10)，较慢的计算机会死机。如果我设置一个较慢的计时器，较快的计算机会有更差的体验。我还担心移动设备中的电池耗尽。基于函数定位元素的正确方法是什么？

Answer 1

尝试使用setTimeoutor window.requestAnimationFrame，这样可以确保新函数调用仅在前一个函数完成运行时才会排队。这样，如果函数花费的时间比您计划的间隔长，浏览器 UI 就不会那么快冻结。

var interval = <so many seconds should it take>;

function update(){
    //do you stuff here




    setTimeout( update, interval );
    //or
    window.requestAnimationFrame( update );
}

第二种方法window.requestAnimationFrame的优点是，如果可能，每秒最多触发 60 次，或者如果浏览器无法以那么快的速度运行，则触发次数更少。如果选项卡或浏览器失去焦点，也不会触发回调。