限制浏览器窗口中对象的动画

Question

我是Javascript和jQuery的新手。首先，我试图让一个对象在浏览器窗口中移动。

其次，当单击对象时，对象需要向后移动，但是，当此时单击对象时，它会停止，需要再次单击它以将其移动到左侧。当我需要它只需一次点击时，可以使用两次单击将对象移回左侧。这是代码：

        var ball = null;

        function moveRight() {
            ball.style.left = parseInt(ball.style.left)+2+'px';
            setTimeout(moveRight,20); 
        }

        function moveLeft() {
            ball.style.left = parseInt(ball.style.left)-2+'px';
            setTimeout(moveLeft,20); 
        }

        function init() {
            ball = document.getElementById('ballObject'); 
            ball.style.left = '0px'; 
            moveRight();
        }

        // function stop(){
        //  clearTimeout(moveRight);
        //  ball.style.left = '0px'; 
        // }

        window.onload = init;

希望你能帮助我。