javascript - Javascript 函数问题

Question

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

    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 函数添加到代码中，元素的位置不再设置。

Answer 1

更改行:

setTimeout(function moveOver( ), 100;

到

setTimeout(moveOver, 100);

---

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

对于 setTimeout ，你应该传递一个函数作为第一个参数，所以 mouseOver或 function(){mouseOver();}将工作。

---

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

你有两个条件:tabpos < 15.8和 tabpos > 15.8 .执行不进入两个 if block 之一的条件是 tabpos == 15.8 ... 但是 JavaScript 的 Number实际上是一个 float 。由于精度误差，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 + '%';
        }
 }