requestAnimationFrame 控制速度模拟setinterval
封装方法:
var requestInterval = function (fn, delay) { var requestAnimFrame = (function () { return ( window.requestAnimationFrame || function (callback, element) { window.setTimeout(callback, 1000 / 60); } ); })(), start = new Date().getTime(), handle = {}; function loop(timeSpan) { handle.value = requestAnimFrame(loop); var current = new Date().getTime(), delta = current - start; if (delta >= delay) { fn.call(this,timeSpan); start = new Date().getTime(); } } handle.value = requestAnimFrame(loop); return handle; };
调用:
requestInterval((...args) => { const element = document.getElementById("test"); console.log(...args); }, 1000);
停止:
cancelAnimationFrame(timer.value);
可以封装停止方法:
var clearRequestInterval = function (handle) { window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) : window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) : window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame( handle.value ) /* Support for legacy API */ : window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) : window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) : window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) : clearInterval(handle); };
参考:
https://blog.csdn.net/cunqu9743/article/details/106998768/
积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案