使用raf模拟倒计时

业务场景

我现在有一个小游戏，需要使用到touch事件左右移动底部元素，并且在游戏开始后在十秒内不停计算底部元素与掉落物品的碰撞。

一开始使用方案为requestAnimation（判断碰撞）+transform（掉落动画）+setInterval（游戏倒计时）。使用interval是因为接到需要加时间的物品时需要增加3s倒计时，interval省事儿，经过chrome调试和真机测试，没有问题。

但是游戏移交给后端时，后端通过微信开发者工具测试发现了倒计时的一个问题，在使用鼠标疯狂移动底部元素时，出现了倒计时停滞的问题。

分析

考虑是move执行太频繁，阻塞了interval的回调，在手机上影响不大，毕竟没办法滑的太疯狂，但是在模拟器上move太快百分百触发。

使用raf模拟倒计时

timeout和interval的缺陷太明显，这个坑填不了，直接换方案吧。

代码实现

var requestId = null;
    
var start = null;

function startTimeout() {
    handleTouch(); // 添加touch处理事件
    requestId = window.requestAnimationFrame(handleGameTimeout);
}

function handleGameTimeout(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;

    if (progress < 10000) {
        // 倒计时未结束
        requestId = window.requestAnimationFrame(handleGameTimeout);
    } else {
        // 倒计时结束
        clearGameBox();
        window.cancelAnimationFrame(requestId);
        start = null;
    }
    
    // 倒计时进度条和字样
    $('.tgct_time').css('width', 100 - ((progress / 10000) * 100) + '%');
    $('.lgc_timetip').find('span').text(10 - Math.floor(progress / 1000));
}