JavaScript函数出现问题

Question

我正在尝试编写一个函数来通过调整其“left”样式以随时间移动元素。目前以其当前形式完全不起作用。

    var tab;
    var tabPos;
function init() {
        tab = document.getElementById("tab");
        tabPos = 10.8;
        tab.style.left = tabPos + '%';
    }
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 + '%';
            }
     }

init函数成功设置了元素的初始位置，但当我添加moveOver函数时，该元素的位置就不再被设置了。

- bearsquared

---

你有一个语法错误。应该是setTimeout(moveOver, 100);。 - Nathan Wall

Answer 1

您的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错误。

- ColinE

---

这些位置不是此代码放置闭合括号的正确位置。 - Alvin Wong

Answer 2

更改这些行：

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 + '%';
        }
 }

- Alvin Wong

---

是的，语法是主要问题，代码现在可以工作了，但是当元素达到15.8%时似乎会出现卡顿而不是停止。 - bearsquared

这是因为您正在使用 < 和 > 而不是 <= 或 >=。 - Sphvn

@bearsquared，我扩展了我的答案，也许你想再看一下。 - Alvin Wong

Answer 3

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

。

- Christian Westman