JavaScript功能無法正常

Question

我有一個.js文件下面的代碼在我的wordpress庫：

jQuery.noConflict(); 
(function($) { 
    $(document).ready(function(){ 

     var timerLength = 5; 
     var secs = timerLength; 
     var currentSeconds = 0 


     function countdownTimer() { 
         currentSeconds = secs % 60; 
         secs--; 
         if(secs !== -1) setTimeout('countdownTimer()',1000); 
         console.log(currentSeconds); 
         if(currentSeconds == "00"){ 
          // Popup shows if the timer runs out 
          showPopup(); 
         }; 
        }; 

     function checkForCookies() { 
       cookieValue = $.cookie('solium_product_page_notification'); 
       if (cookieValue == undefined){ 
        countdownTimer(); 
       } else if (cookieValue == "closed" || "dont-show-again") { 
        console.log('Cookies are blocking the popup'); 
       }; 
     }; 

     function showPopup() { 
        $("#productModal").modal("show"); 
        setCookies(); 
     }; 

     function setCookies(){ 
       $("#close-only").on("click", function(){ 
        $.cookie('solium_product_page_notification','closed', { expires: 1 }); // Cookie expires in 1 day 
        console.log('Temp Cookie Created'); 
       }); 
       $("#dont-show-again").on("click", function(){ 
        $.removeCookie('solium_product_page_notification','closed'); 
        $.cookie('solium_product_page_notification','dont-show-again', { expires: 365 }); // Cookie expires in 1 year 
        console.log('Perm Cookie Created'); 
       }); 
     }; 

     checkForCookies(); 

    }); 
})(jQuery); 

，它被稱爲在這裏footer.php：

if('product' === get_post_type()) { 
    if (wp_script_is('jquery', 'done')) { 
     ?> 
        <!-- PRODUCT PAGE MODAL --> 
         <!-- BEGIN MODAL --> 
         <div class="modal fade" id="productModal" data-keyboard="false" > 
            <div class="modal-body"> 
             <button type="button" class="close" id="close-only" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
             <h4 class="modal-title">Hey there!</h4> 
             <p class="popup-text">While you were looking around, we found a few things you may be interested in!</p> 
             <button type="button" class="plain-link" id="dont-show-again" data-dismiss="modal">Dont Show Again</button> 
            </div> 
         </div> 
         <!-- END MODAL --> 
     <script type="text/javascript" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/js/product-modal.js"></script> 
     <?php 
    }; 

}; 

現在，當它通過cookie檢查頁面加載，然後開始倒計時，其控制檯日誌5，但一旦它進入到4算上我收到「VM1850：1未捕獲的ReferenceError countdownTimer沒有定義」鉻。

但是，如果我在對象定義倒計時時間面向時尚

  countdownTimer = function() { 
         currentSeconds = secs % 60; 
         secs--; 
         if(secs !== -1) setTimeout('countdownTimer()',1000); 
         console.log(currentSeconds); 
         if(currentSeconds == "00"){ 
          // Popup shows if the timer runs out 
          showPopup(); 
         }; 
        }; 

一切正常！有沒有人有一個想法，爲什麼會發生這種情況？我想知道是否jQuery noconflict導致了問題，因爲所有這些代碼都包含在一個函數中。任何幫助將不勝感激！

Answer 1

由於函數是在文檔就緒塊內定義的，因此您可以在setTimeout中的全局範圍內調用它。

if(secs !== -1) setTimeout('countdownTimer()',1000); //executes on window, not the current scope 

需求是

if(secs !== -1) setTimeout(countdownTimer,1000);