Javascript 如何使移动设备中的jquery setinterval移动更平滑？

对不起，英语不好
为现场干杯
我的任务是创建没有滚动的站点。当用户点击屏幕右侧时，小车开始向前移动。当它到达屏幕中间时，轿厢停止，固定内容块开始向OPOSITE方向移动。若用户将光标移动到屏幕左侧（同时按住鼠标按钮），则汽车应向后移动
桌面版本按预期工作。但手机版的速度很慢。（它并不是很慢，我想它不像桌面那么平滑）
我能做些什么来解决这个问题

在touchstart事件中，我获取event.pageX值以检查用户触摸的屏幕部分。（这样我就知道汽车应该朝哪个方向移动）并将该值存储在变量“mousePos”中。然后我用移动函数调用setInterval

在touchend事件中，我清除间隔以阻止车辆移动

在touchmove上，我将用新的event.pageX值重写“mousePos”var。例如：用户单击，汽车开始移动，若用户将光标向左移动，我将使用此变量检查方向并将汽车转回

在mouseMove功能中，我将检查汽车的位置，并决定应该做什么动作——要么移动汽车，要么移动背景，我将检查汽车是否到达终点的起点

活动：

    $(document).on('mousedown touchstart', '.mouse-click', function(event){
        clicking = true;
        mousePos = event.pageX;

        if ( event.target.className == 'helper' ) {
            showModal();
        } else {
            moveStuff = setInterval(mouseMove, 1);
        }
    });

    $(document).on('mouseup touchend', function(){
        clicking = false;
        carLights.removeClass('blink');
        clearInterval(moveStuff);
    })

    $(document).on('mousemove touchmove', '.mouse-click', function(event){
        if(clicking == false) {
            return;
        } else {
            mousePos = event.pageX;
        }
    });

功能：

    function mouseMove() {
        let offset = parseInt( mainContent.css('left') );
        let offsetCar = parseInt( car.css('left') );
        if ( mousePos > middleScreen ) {
            carLights.removeClass('blink');
            if ( offset < - ( contentWidth ) ) {
                return;
            } else {
                rotateWheelsForward();
                if ( offsetCar < middleScreen ) {
                    car.css('left', (offsetCar + mouseSpeed) + 'px');
                } else {
                    mainContent.css('left', (offset - mouseSpeed) + 'px');
                }
            }
        } else if ( mousePos < middleScreen ) {
            carLights.addClass('blink');
            if ( offset > 0 ) {
                carLights.removeClass('blink');
                return;
            } else {
                rotateWheelsBackward();
                if ( offsetCar > minCarLeft ) {
                    car.css('left', (offsetCar - mouseSpeed) + 'px');
                } else {
                    mainContent.css('left', (offset + mouseSpeed) + 'px');
                }
            }
        }
    }

函数mouseMove（）{
让offset=parseInt（mainContent.css（'left'））；
let offsetCar=parseInt（car.css（'left'））；
如果（鼠标点>中间屏幕）{
carLights.removeClass（“闪烁”）；
如果（偏移量<-（内容宽度））{
返回；
}否则{
向前旋转车轮（）；
if（偏置车<中间屏幕）{
css（'left'，（offsetCar+mouseSpeed）+'px'）；
}否则{
css（'left'，（offset-mouseSpeed）+'px'）；
}
}
}else if（鼠标点<中间屏幕）{
carLights.addClass（'blink'）；
如果（偏移量>0）{
carLights.removeClass（“闪烁”）；
返回；
}否则{
向后旋转车轮（）；
如果（offsetCar>minCarLeft）{
css（'left'，（offsetCar-mouseSpeed）+'px'）；
}否则{
css（'left'，（offset+mouseSpeed）+'px'）；
}
}
}
}

那么，如何使移动设备中的移动更加平滑？（我使用的是iphone 5s safari，但在iphone 6上进行了测试，效果仍然很差）

---

我应该对此代码进行哪些更改？

我建议使用变换而不是位置，例如：左，顶部原因这确实会影响层回流重新绘制。使用requestAnimationFrame（明智地）执行平滑事件动画，如滚动、鼠标悬停或任何其他事件

然后使用

将更改为：transform到将来将“转换”的元素。这将创建新图层，并为以后的图元更改做好准备

在我的例子中，相对位置会影响渲染工具chrome上的回流或绿色闪烁。所以我更喜欢使用固定/绝对位置来防止这种情况

这里有一些很好的文章供你获取，以及如何获取

希望这有帮助；）
 谢谢，我将阅读文章并尝试重写代码。如果有帮助的话，我稍后会回来，把你的帖子标记为答案。我做了一些修改。有趣的事实：在我的手机（iphone5s）上，它仍然不像它应该的那样平滑，但在更现代的iphone和android上它可以平滑工作（我已经向其他手机的朋友发送了链接）。我想我需要做更多的修改，使它在老式手机上运行更顺畅，但它可以工作，所以谢谢你）