一、第一次點擊觸發一個函數，之后點擊都觸發另一個函數

1、小白實現

2、大神實現

代碼如下：

<body>
<button>click me</button>
    <script>
    function bind(func1, func2) {
        let func = null
        return function() {
            (!func ? (func = func2, func1) : func).apply(this, arguments)
        }
    }

    $('button').click(bind(()=>{alert(1)}, ()=>{alert(2)}));
    </script>
</body>

說明2點：

1、let定義的變量是塊級的變量。

while(1){
    let let1 = 2;
    var var1 = 2;
}
alert(let1);  //不可訪問
alert(var1);  //可以訪問

2、(func = func2, func1)

javascript 逗號表達式，從左到右執行每個子表達式，並將最后一個子表達式的值作為整個表達式的值。=優先級高於，（點擊了解更多）。所以這個表達式先將func2賦給func，然后整個表達式的值取func1。

二、點擊按鈕只調用一次事件處理

1、實現

同樣也可以通過判斷全局變量flag為是否為true來處理。

這里介紹一個jquery的one方法。

$("button").one("click", function() {
    alert("This will be displayed only once.");
});

了解更多可參考：http://www.jquery123.com/one/

原理就是當第一次觸發以后，我們就立即刪除該句柄。

// 注意：前提是我們已經定於好了addEvent/removeEvent函數
// (定義好了才能使用哦)  

var myIntro = document.getElementById('intro');
addEvent(myIntro, 'click', oneClickOnly);

function oneClickOnly() {
    alert('WOW!');
    removeEvent(myIntro, 'click', oneClickOnly);
}

2、實際應用

場景：工作中有遇到這種情況，如下，點“系統消息”代表全部系統消息都讀了。

之前做的就是click時調用readMsg()，事實上這樣每點擊一次就會觸發請求一次接口，可以通過只點擊一次來優化頁面性能。

   //在點擊系統消息tab的時候置為已讀 $("li[data-href='tabs02'] h2").one("click", function() { readMsg("sys", "all"); });

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/6394424.html有問題歡迎與我討論，共同進步。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery EasyUI中treegrid的中右鍵菜單和一般按鈕同時綁定事件時的怪異事件 jQuery解除綁定事件 jQuery如何給body綁定事件？ Jquery on綁定的事件觸發多次 jquery批量綁定事件 jquery綁定事件 jquery 綁定事件前先解除事件綁定 Jquery之on()綁定事件和off()解除綁定事件 jquery添加的html元素按鈕為什么不執行類樣式綁定的click事件 jquery移除事件，綁定事件，觸發事件

jquery按鈕綁定特殊事件