建议扩展：移动块在Javascript中不起作用

注意：这是我刚才问的一个问题的延伸，我已经做了编辑并采纳了建议，但仍然没有运气

我试图制作一个网页，当你点击一个链接时，链接每100毫秒呈对角线移动一次

所以我有我的Javascript，但是现在当我点击链接时，什么都没有发生。我已经通过JSLint运行了我的代码（因此将COMAPRIONS更改为===而不是==，这在JS中很奇怪？）。但是，我从JSLink得到了这个错误：

错误：隐含全局：self 15,38，文档31

你认为我做错了什么

<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
    var block         = null;
    var clockStep     = null;
    var index         = 0;
    var maxIndex      = 6;
    var x             = 0;
    var y             = 0;
    var timerInterval = 100;  // milliseconds
    var xPos          = null;
    var yPos          = null;

    function moveBlock()
    {
        if ( index < 0 || index >= maxIndex || block === null || clockStep === null ) 
        { 
            self.clearInterval( clockStep );
            return;
        }

        block.style.left = xPos[index] + "px";
        block.style.top  = yPos[index] + "px";
        index++;
    }

    function onBlockClick( blockID )
    {
        if ( clockStep !== null )
        {
            return;
        }

        block = document.getElementById( blockID );
        index = 0;
        x     = number(block.style.left);  // parseInt( block.style.left, 10 );
        y     = number(block.style.top);  // parseInt( block.style.top, 10 );
        xPos  = new Array( x+10, x+20, x+30, x+40, x+50, x+60 );
        yPos  = new Array( y-10, y-20, y-30, y-40, y-50, y-60 );

        clockStep = self.SetInterval( moveBlock(), timerInterval );
    }
-->
</script>

<style type="text/css" media="all">
    <!--
    @import url("styles.css");

    #blockMenu { z-index: 0; width: 650px; height: 600px; background-color: blue; padding: 0; }

    #block1 { z-index: 30; position: relative; top: 10px;  left: 10px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block2 { z-index: 30; position: relative; top: 50px; left: 220px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block3 { z-index: 30; position: relative; top: 50px; left: 440px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }
    #block4 { z-index: 30; position: relative; top: 0px; left: 600px; background-color: red; width: 200px; height: 200px; 
              margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ }

    #block1 a { display: block; width: 100%; height: 100%; }
    #block2 a { display: block; width: 100%; height: 100%; }
    #block3 a { display: block; width: 100%; height: 100%; }
    #block4 a { display: block; width: 100%; height: 100%; }

    #block1 a:hover { background-color: green; }
    #block2 a:hover { background-color: green; }
    #block3 a:hover { background-color: green; }
    #block4 a:hover { background-color: green; }

    #block1 a:active { background-color: yellow; }
    #block2 a:active { background-color: yellow; }
    #block3 a:active { background-color: yellow; }
    #block4 a:active { background-color: yellow; }

    -->
</style>

对于初学者，self.setInterval和self.clearInterval没有在任何地方定义

您可以使用jQuery或任何第三方libs吗？如果您使用jsfiddle.net，那也很好：-）您的意思是我应该删除self吗。部分因为我已经找到了很多关于这个函数的教程&这个@Mack：我想把“self”改为“window”……但这可能不是问题所在。您需要在此行的moveBlock（）函数周围添加引号：clockStep=self.SetInterval（'moveBlock（）'，timerInterval）；