<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./underscore/underscore.js"></script>
<script src="./jquery/index.js"></script>
</head>
<body>
<div id="run">测试requestAnimationFrame</div>
<div id="stop">停止requestAnimationFrame</div>
</body>
<script>
var timer = null;
function newSetInterval(callback, time, ...args){
var set = function(callback, time, ...args){
return function(){
var start = +new Date();
var end = start;
while(end-start<time){
end = +new Date();
}
callback(...args);
timer = requestAnimationFrame(set(callback, time, ...args));
}
}
set(callback, time, ...args)();
}
function newClearInterval(timer){
cancelAnimationFrame(timer);
}
// 实践
$("#run").on("click", function(){
newSetInterval(function(a, b){
console.log(a+b);
}, 500, 1, 2);
});
$("#stop").on("click", function(){
console.log("stop", timer);
newClearInterval(timer);
});
</script>
</html>
因为只有一个全局变量timer,所有当页面需要多个定时器时,会存在问题。待完善~