且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

requestAnimationFrame的时间戳不可靠

更新时间:2022-10-18 13:18:43

至少在Blink和Gecko中,传递给rAF回调的时间戳是最后一个

  let stop = false;让perf_elapsed = performance.now();让timestamp_elapsed = 0;令Calculation_time = 0;让raf_id;const loop =时间戳=>{const perf_now = performance.now();const timestamp_delta = +(timestamp-timestamp_elapsed).toFixed(2);timestamp_elapsed =时间戳;const perf_delta = +(perf_now-perf_elapsed).toFixed(2);perf_elapsed = perf_now;const错误= timestamp_delta<计算时间;如果(computation_time){console.log({计算时间,timestamp_delta,perf_delta,错误});}//框架有些沉重const Calculation_start = performance.now();const frame_duration = 1000/frequency.value;const Calculation_duration =(Math.ceil(frame_duration * 10)+ 1)/10;//增加0.1毫秒while(performance.now()-Calculation_start< Calculation_duration){}Calculation_time = performance.now()-Calculation_start;raf_id = requestAnimationFrame(loop)}频率.oninput= evt =>{cancelAnimationFrame(raf_id);console.clear();raf_id = requestAnimationFrame(loop);setTimeout(()=> {cancelAnimationFrame(raf_id);},2000年);};frequency.oninput();  

 如果您的显示器的帧频与普通60Hz不同,则可以在此处插入:<输入type ="number" id =频率" value ="60"步骤="0.1">