只實行一次的事宜綁定函數

2023年2月22日 153次阅读 来源: Felix

概覽

在前端開闢中，有時會願望事宜只被挪用一次。比方，點擊一張縮略圖加載視頻文件或點擊“更多”圖標經由過程AJAX展現分外的內容。
當屢次點擊的時刻，事宜處置懲罰函數會被挪用屢次，這會形成瀏覽器屢次加載不必要的資本。更壞的狀況可能會致使沒法預期的事變發作。
光榮的是，運用JavaScript能夠很輕易的完成只綁定一次的事宜。步驟以下：

  1. 定義事宜處置懲罰函數，比方點擊事宜處置懲罰函數
  2. 點擊元素實行事宜處置懲罰函數
  3. 移除事宜處置懲罰函數。

原生JavaScript事宜綁定

所謂的移除事宜處置懲罰函數指的是關於給定的元素和事宜範例，處置懲罰順序在第一次觸發事宜後會被馬上消除綁定。直接上代碼：

function once(type, selector, callback) {
    selector.addEventListener(type, function fn(e) {
        e.target.removeEventListener(e.type, fn);
        return callback(e);
    }, false);
}

如今就能夠運用once()要領只讓事宜實行一次了：

once('click', buttonElement, function () {
    console.log('executed only once.');
});

除此之外，W3C規範供應一個事宜綁定要領addEventListener，我們先來看看這個要領的API：

target.addEventListener(type, listener[, options])

个中，options對象供應一個once屬性來指定事宜綁定的次數，bool值。假如為true示意事宜實行之後會自動移除綁定。

var buttonEl = document.getElementById('w3c');
buttonEl.addEventListener('click', function (e) {
    console.log('W3C規範事宜');
},{once: true});

Jquery事宜綁定

jQuery供應了一個one()要領完成只綁定一次的事宜。更多運用要領請參考one()要領文檔。

$("#foo").one("click", function() {
    console.log("Event fired once!!!");
});

one()實際上是挪用了on()要領，經由過程參數掌握事宜綁定的次數。所以假如想要相識jQuery怎樣完成事宜綁定，請看on()要領的完成。

one: function (types, selector, data, fn) {
    return on(this, types, selector, data, fn, 1);
}

Vue事宜綁定

Vue中的經由過程修飾符once完成只觸發一次事宜處置懲罰順序的體式格局：

<button v-on:click.once="doThis"></button>

完。

已同步到個人博客
只實行一次的事宜綁定函數

    原文作者：Felix
    原文地址: https://segmentfault.com/a/1190000014900491
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞