只調用一次函數？

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
}

（也許隱藏在實用功能中。）

Answer 2

您需要做的就是從偵聽器中刪除事件偵聽器（以便它將停止偵聽事件）。 但是，為了刪除偵聽器，您需要對它進行引用，因此您無法使用直接連接到mouseover的預定義偵聽器來執行此操作。 相反，使用addEventListener來附加偵聽器，保留返回的引用，然后使用removeEventListener從回調中刪除偵聽removeEventListener 。

var contact = document.getElementById('contact');

contact.addEventListener('mouseover', tehlistener);

function tehlistener() {
        // yada yada do whatever

        // ...

        // I think it's ok to use `this` here, but since this is so specific
        // its better to be specific about which listener you want removed
        contact.removeEventListener('mouseover', tehlistener);
    };

這是關於addEventListener的可愛MDN文章的鏈接。

Answer 3

如果您對使用JQuery感興趣，那么有一個很好的函數稱為“one”，可能正是您所需要的。

http://api.jquery.com/one/

編輯：添加更多代碼以顯示更多解決方案：

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

Answer 4

您可以使用once功能。

function once(fn){
   var called = false;
   return function(){
       if (called) {
           return;
       }
       called = true;
       return fn.apply(this, arguments);
   }
}

例：

something.onmouseover = once(function(){
    // this will happen only once
});

Answer 5

你可以只覆蓋事件處理程序

<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); 
 this.onmouseover = null;//overwrite event handler with a blank callback
};
</script>