Javascript函数的问题答案

【问题标题】：Issue with Javascript functionJavascript函数的问题
【发布时间】：2012-11-29 06:36:44
【问题描述】：

我正在尝试编写一个函数，该函数将通过随时间调整元素的“左”样式来移动元素。它目前以目前的形式根本无法工作。

 变量选项卡；
    变量选项卡；

    函数初始化（）{
        tab = document.getElementById("tab");
        tabPos = 10.8;
        tab.style.left = tabPos + '%';
    }

    函数 moveOver( ) {
        如果 (tabPos  15.8)
            {
                setTimeout(函数 moveOver(), 100;
                tabPos = tabPos - 0.1;
                tab.style.left = tabPos + '%';
            }
     }

init 函数成功设置了元素的初始位置，但我在代码中添加了 moveOver 函数，元素的位置不再设置。

【问题讨论】：

您有语法错误。应该是setTimeout(moveOver, 100);

标签： javascript

【解决方案1】：

换行：

setTimeout(function moveOver( ), 100;

到

setTimeout(moveOver, 100);

function moveOver( ) 不是有效的 JavaScript 语法。此外，您的括号（或括号）不匹配。因为您有语法错误，所以您的代码将无法运行。

对于setTimeout，您应该传递一个函数作为第一个参数，因此mouseOver 或function(){mouseOver();} 将起作用。

您的脚本的另一个问题...是您会看到元素不断跳跃。

您有两个条件：tabpos < 15.8 和 tabpos > 15.8。执行不进入两个 if 块之一的条件是 tabpos == 15.8... 但 JavaScript 的 Number 实际上是一个浮点数。由于精度错误，15.8 == 15.7 + 0.1 将导致false，这表明15.8 与15.7 + 0.1 并不完全相同。事实上，15.7 + 0.1大约等于15.799999999999999...

所以我建议你对tabPos使用整数值，例如158，只有在设置样式时才除以10。

您的代码的可能结果：

var tab;
var tabPos;

function init() {
    tab = document.getElementById("tab");
    tabPos = 108;
    tab.style.left = tabPos / 10 + '%';
}

function moveOver( ) {
    if (tabPos < 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos + 1;
            tab.style.left = tabPos / 10 + '%';
        }
    else if (tabPos > 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos - 1;
            tab.style.left = tabPos / 10 + '%';
        }
 }

【讨论】：

是的，语法是主要问题，代码可以正常工作，但是现在该元素在达到 15.8% 时似乎结结巴巴，而不是停止。
这是因为您使用的是< 和> 而不是<= 或>=
@bearsquared 我已经扩展了我的答案，也许你想回顾一下。

【解决方案2】：

setTimeout 函数调用的括号未闭合：

function moveOver( ) {
    if (tabPos < 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos + 0.1;
            tab.style.left = tabPos + '%');  // <----
        }
    else if (tabPos > 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos - 0.1;
            tab.style.left = tabPos + '%'); // <----
        }

 }

您应该看到浏览器报告的 JavaScript 错误。

【讨论】：

这些不是放置此代码右括号的正确位置。

【解决方案3】：

将setTimeout(function moveOver( ), 100; 更改为setTimeout(moveOver, 100);

【讨论】：