如何在javascript中实现简单的动态滚动功能？

Question

我想在2个参数上实现简单的动态滚动/ eazing。它的工作原理......部分/大部分。但有些事情是错误的。 Problem and full code can be observed here. 所以我尝试过这样的代码（不包含谷歌浏览器可以看到的错误，但是根本不能正常工作 - 不时（随机）崩溃并向错误的方向滚动（仅限于一个）..）：

        var dragDuration = 0;
        var lonBuffer = 0;
        var latBuffer = 0;
        var lastLonValue = 0;
        var lastLatValue = 0;
        var lonSignBuffer = 0;
        var latSignBuffer = 0;
        var kineticTimer;
        var kineticScrollingPrivateTimer;

        function startKineticTimer() {
          stopKineticScrolling();
            kineticTimerTick();
        }

        function kineticTimerTick() {
            dragDuration = dragDuration + 1;
            kineticTimer = setTimeout(kineticTimerTick, 50);
        }

        function stopKineticTimer() {
            clearTimeout(kineticTimer);
            startKineticScrolling(dragDuration);
        }

        function addToKineticBuffers(Lon, Lat) {

            var currentLonSign = ((lastLonValue - Lon) >= 0) ? 1 : -1; //if(lon >= 0){currentLonSign = 1;}else{currentLonSign = -1;}
            var currentLatSign = ((lastLatValue - Lat) >= 0) ? 1 : -1;
            if (currentLonSign != lonSignBuffer) {
                lonBuffer = 0;
                dragDuration = 0;
                lonSignBuffer = currentLonSign;
            }

            if (currentLatSign != latSignBuffer) {
                latBuffer = 0;
                dragDuration = 0;
                latSignBuffer = currentLatSign;
            }
            lonBuffer = lonBuffer + Lon;
            latBuffer = latBuffer + Lat;
            lastLonValue = Lon;
            lastLatValue = Lat;
        }

        function moveLonLat(newLon, newLat) {
            lon += newLon * 0.01;
            lat += newLat * 0.01;
            lastLonValue = lon;
            lastLatValue = lat;
            render();
        }
        function kineticScrolling() {


            if (latBuffer < 0) {
                latBuffer = 0; 
            }
            if (lonBuffer < 0) {
                lonBuffer = 0; 
            }
            moveLonLat(lonBuffer / dragDuration,  latBuffer / dragDuration);
            lonBuffer = lonBuffer - lonBuffer / dragDuration;
            latBuffer = latBuffer - latBuffer / dragDuration;
            kineticScrollingPrivateTimer = setTimeout(kineticScrolling, 100);        
   if (latBuffer < 0) {
                latBuffer = 0; stopKineticScrolling();
            }
            if (lonBuffer <= 0) {
                lonBuffer = 0; stopKineticScrolling();
            }
        }
        function startKineticScrolling() {

            kineticScrolling();
        }

        function stopKineticScrolling() {

            clearTimeout(kineticScrollingPrivateTimer);
        }



        function onDocumentMouseDown(event) {

            event.preventDefault();
            stopKineticScrolling();
            startKineticTimer();
            isUserInteracting = true;

            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

        }

        function onDocumentMouseMove(event) {

            if (isUserInteracting) {

                lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
                lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;

                addToKineticBuffers(lon, lat);

                render();

            }
        }

        function onDocumentMouseUp(event) {

            isUserInteracting = false;

            stopKineticTimer();
            render();
        }

        function onDocumentMouseWheel(event) {

              fov -= event.wheelDeltaY * 0.05;
              camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
              render();
        }


        function onDocumentTouchStart(event) {

            if (event.touches.length == 1) {

                event.preventDefault();

                onPointerDownPointerX = event.touches[0].pageX;
                onPointerDownPointerY = event.touches[0].pageY;

                onPointerDownLon = lon;
                onPointerDownLat = lat;
            }
        }

        function onDocumentTouchMove(event) {

            if (event.touches.length == 1) {

                event.preventDefault();

                lon = (onPointerDownPointerX - event.touches[0].pageX) * 0.1 + onPointerDownLon;
                lat = (event.touches[0].pageY - onPointerDownPointerY) * 0.1 + onPointerDownLat;

                render();

            }
        }

        function render() {

            lat = Math.max(-85, Math.min(85, lat));
            phi = (90 - lat) * Math.PI / 180;
            theta = lon * Math.PI / 180;

            camera.target.position.x = 500 * Math.sin(phi) * Math.cos(theta);
            camera.target.position.y = 500 * Math.cos(phi);
            camera.target.position.z = 500 * Math.sin(phi) * Math.sin(theta);

            renderer.render(scene, camera);

        }

我想知道如何解决我的错误？ （但不使用Jquery或任何其他库）