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);