javascript - 只调用一次函数？

Question

所以我在我正在从事的项目中使用了这个 javascript:

<script type="text/javascript">

    document.getElementById('contact').onmouseover = function () 
    {
        var w = 130;
        function step() 
        {
            if (w < 250) 
            {
                middle.style.width = (w++) + "px";
                setTimeout(step, 5);
            }
        }
        setTimeout(step, 1500); 
    };

</script>

我希望它只运行一次。在它检测到鼠标悬停后，我希望它运行该函数，然后在页面刷新之前不再运行。我将如何做到这一点？

Answer 1

我要么使用 jQuery 的 one 方法，要么如果您想使用“普通”JavaScript，您可以在触发函数后删除事件。这是一个例子:

// Create a named function for the mouseover event
function myFunc() {
    // Remove the `myFunc` function event listener once `myFunc` is run
    document.getElementById('contact').removeEventListener('mouseover', myFunc, false);

    var w = 130;
    function step() {
        if (w < 250) {
            middle.style.width = (w++) + "px";
            setTimeout(step, 5);
        }
    }
    setTimeout(step, 1500);
};

// Add an event listener to run the `myFunc` function on mouseover
document.getElementById('contact').addEventListener('mouseover', myFunc, false);

请注意，如果你必须支持 IE8(或更早版本)，则需要使用 ...attachEvent("onmouseover", myFunc) 和 detachEvent("onmouseover", myFunc ); 代替;您可以通过检查元素是否具有 addEventListener 来判断:

var elm = document.getElementById('contact')
if (elm.addEventListener) {
    // Use addEventListener
}
else {
    // Use attachEvent
}

(可能隐藏在效用函数中。)