javascript function rotate element => 尝试为传入的特定参数设置 IF 条件

Question

我需要旋转 2 个 div block ，一个顺时针，另一个逆时针。我已经有了第一组，使用 var STEP 我可以通过给它正/负值来选择哪个方向。现在，由于我已经知道第二个 div 参数 startUpProc('fourSquares3') 的 ID，我尝试创建一个 if 语句来检查是否传递了参数“fourSquares3”并将全局变量 STEP 设置为相反的值(在这种情况下我们说是正数)并且它只是不起作用，即使使用 if ，在我运行它的最后，它们都以相同的方式转动。

所以我的问题是:我怎样才能正确地更改代码，以便在传递特定参数时，它会转向 CCW。

这是我的代码:

startUpProc('fourSquares');


var STEP = -7;

function startUpProc(id)
{
    var log = window.document.getElementById(id);
    makeCircle(log, 0);
}

function makeCircle(item, targetAngle) {
    changeRotate(item, targetAngle);

    if (targetAngle < 720) {
        setTimeout(function (){
            makeCircle(item, targetAngle + STEP);
        }, 80);
    }
}

function changeRotate(item, val)
{
    item.style.transform = "rotate(" + val + "deg)";
    item.style.webkitTransform = "rotate(" + val + "deg)";
    item.style.mozTransform = "rotate(" + val + "deg)";
    //alert(item.style.transform);
}

Answer 1

问题是您使用相同 变量 (STEP)，其值是共享 在两个 block (div) 之间。您必须将此变量封装到执行旋转的代码中。最简单的方法是使用 closures .

在您的情况下，您必须将 STEP 的声明以及使用它的所有子例程函数放在 startUpProc 函数中。这确保了 startUpProc 的每个实例(调用)都将处理它自己的变量实例。此外，最好通过 CSS 类而不是 ID 来确定方向类型。这使您的代码更加灵活，不依赖于固定的 ID 值。它还允许将此代码用于多个 block (3 个或更多)，而不仅仅是您示例中的两个 block 。

var classCcw = 'ccw'; // class indicating counter-clockwise direction

function startUpProc(id)
{
    var log = window.document.getElementById(id);
    var isCcw = (' '+log.className+' ').indexOf(' '+classCcw+' ') >= 0;
    var STEP = isCcw? 7 : -7;
    makeCircle(log, 0);

    function makeCircle(item, targetAngle) {
        changeRotate(item, targetAngle);

        if (targetAngle < 720) {
            setTimeout(function (){
                makeCircle(item, targetAngle + STEP);
            }, 80);
        }
    }

    function changeRotate(item, val)
    {
        item.style.transform = "rotate(" + val + "deg)";
        item.style.webkitTransform = "rotate(" + val + "deg)";
        item.style.mozTransform = "rotate(" + val + "deg)";
        //alert(item.style.transform);
    }
}

startUpProc('square1');
startUpProc('square2');
startUpProc('square3');

HTML 代码示例:

<div id="square1" class="ccw">
<div id="square2">
<div id="square3" class="ccw">