JS动画制作函数

setTimeout与setTimeout

延迟执行

 $div.on("click", function () {
        setTimeout(function () {
            console.log("Time out 2000ms runs");
        }, 2000);
    }) // 第一个参数是响应函数，第二个参数是Timeout的时间
$div.dblclick(function () {
        clearTimeout(func_id);
    });

setInterval与setInterval

循环一定时间间隔然后执行

$div.on("click", function () {
        setInterval(function () {
            console.log("Time out 2000ms runs");
        }, 2000);
    })
// 结束setInterval    不过需要谨慎的是当心dblclick被当做两次click。解决方案是click满足后就return false,这样就只剩下dblclick了

$div.dblclick(function () {
        clearInterval(func_id);
    });

requestAnimationFrame

每次浏览器刷新的时候，这个函数执行一次。由于浏览器要每秒钟执行60次，所以这个函数也要循环或者递归执行60次/秒。做游戏常用

let main = function () {
    let step = (timestamp) => {
        // console.log(timestamp);
        $('div').width($('div').width + 2);
        requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
}

因为一些特点，现在一般使用的是requestAnimationFrame