如何使移动设备中的 jquery setinterval 移动更顺畅？

Question

抱歉英语不好。
这是link 到网站。
我的任务是创建没有滚动的站点。当用户点击屏幕右侧部分时，汽车开始向前移动。当它到达屏幕中间时 - 汽车停止并且固定内容块开始向相反方向移动。如果用户将光标移动到屏幕左侧（按住鼠标按钮单击）汽车应该向后移动。
桌面版按预期工作。但是手机版很慢。 （它并不完全慢，它不像桌面那么流畅我猜）
我该怎么做才能解决这个问题？

1. 在 touchstart 事件中，我得到 event.pageX 值来检查用户触摸了屏幕的哪个部分。 （所以我会知道汽车应该向哪个方向移动）并将这个值存储在变量“mousePos”中。然后我用移动函数调用 setInterval
2. 在 touchend 事件中，我清除间隔以停止汽车移动。
3. 在 touchmove 时，我将用新的 event.pageX 值重写“mousePos”变量。例如：用户点击，汽车开始移动，如果用户将光标向左移动，我将使用这个变量来检查方向并返回汽车。
4. 在 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');
                }
            }
        }
    }

那么我怎样才能让移动设备中的移动更流畅？ （我使用 iphone 5s safari，但在 iphone 6 中测试过，但效果仍然不佳）
我应该对此代码进行哪些更改？

Answer 1

我建议使用变换而不是位置，例如：左，上，因为那真的会影响层回流重绘。 （明智地）使用 requestAnimationFrame 来执行平滑的事件动画，如滚动、mouseup 或任何其他事件。

然后将will-change: transform; 用于将在未来“转换”的元素。这将创建新层并为以后的元素更改做准备。

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

这里有一篇很棒的文章供您获取Leaner, Meaner, Faster Animations with requestAnimationFrame 以及如何获取to achieving 60 fps animations with css

希望对您有所帮助；）