只運行一次javascript函數

Question

我有這個簡單的javascript函數：

<script type="text/javascript">
    var popup = '0';
    if(popup == '0') {
       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                  alert('test');
                  popup = '1';
            });
       }); 
    }
</script>

<button class="button">Test</button>

我希望函數僅在第一次單擊時發出警報但它仍然有效，盡管我將popup的值更改為1

Answer 1

你需要的是.one()函數。 它確保代碼僅為您觸發一次。

文檔： http ： //api.jquery.com/one/

文檔示例：

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

Answer 2

編寫代碼如下：

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
             if(popup == '0') {
                alert('test');
                popup = '1';
             }
          });
     }); 
</script>

設置單擊偵聽器后，之前的if語句的位置不再執行。 只有點擊功能里面的代碼。

或者，您可以取消綁定onClick偵聽器，而不是設置popup = '1' 。 請嘗試以下方法：

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
              alert('test');

              //unbinds *all* listeners previously registered on "document"
              $(document).unbind('click');
          });
     }); 
</script>

更簡潔，就像Mathletics所提到的那樣，可以清除內存中不必要的回調。

Answer 3

嘗試：

<script type="text/javascript">
    var popup = '0';

       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                if(popup == '0') {
                  alert('test');
                }
                  popup = '1';
            });
       }); 
</script>

你有一個將彈出窗口設置為1的功能但從未再次檢查其值。 這樣它就會被檢查並且應該正常工作。