安卓系统微信内嵌浏览器 touch页面 css动画停顿？

Question

分别在安卓、苹果上测试，疯狂点击屏幕，苹果很好，但是安卓停顿的很厉害。有什么方法解决么？

function Ball () {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    this.id = Date.now();
    var ballDiv = '<div id="' + this.id + '" class="ball" style="position: absolute; top: 1rem; left: 9rem; width: 2rem; height: 2rem; background-color: rgb(' + r + ',' + g + ',' + b + ');"></div>'
    $('body').append(ballDiv);
    this.move();
}

Ball.prototype.move = function () {
    setInterval(function () {
        var $dom = $('#' + this.id);
        var t = $dom.offset().top
        $dom.css({ transform: 'translateY(' + (t + .5) + 'px)' })
    }.bind(this), 20);
};

setInterval(function () {
    new Ball();
}, 2000)

Answer 1

排除定时器以清除的情况？安卓的流畅度确实不如IOS，可以通过调整定时器的刷新频率贴近流畅

Answer 2

大概吧这问题一概是之前的定时器没清除导致的，在每次创建定时器前先清除上一次的定时器。加个定时器timer，然后在每次创建定时器之前清除掉clearInterval(timer);