从一个功能到另一个功能变量(accsseing variable from one function to another)

我没有弄清楚如何从$("#checkDate").on("click", function();访问percEntage变量。

var percEntage; function move() { move.called = true; var elem = document.getElementById("checkDate"); var width = 10; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; ==>>percEntage = document.getElementById("checkDate").innerHTML = width * 1 + '%'; } } } $("#checkDate").on("click", function(){ var dateObject = $("#arrivalsDate").datepicker('getDate'); if(!dateObject){ $("#arrivalsDate").effect( "shake", {times:4}, 1000 ); }else{ move(); ==>alert(percEntage); if(percEntage=="100%"){ //do something } } });

I didn't figure out how to accessed percEntage variable from $("#checkDate").on("click", function();.

最满意答案

与其他人所写的相反，您不需要在更全局的范围内定义（足够全球化！）或使用window.percEntage 。

实际上，没有什么能阻止$("#checkDate").on("click", ...来访问percEntage变量。

请查看包含代码简化版的以下代码段：

var percEntage;

function move() {
    var width = 10;
    var id = setInterval(frame, 50);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            $( "#checkDate" ).css( "width", width + '%');
            $( "#checkDate" ).html( width + "%" )
            percEntage = $( "#checkDate" ).html();
        }
    }   
}

$("#checkDate").on("click", function(){
    move();
    alert(percEntage);
    if(percEntage=="100%"){
	    alert( "Completed!" );
        //do something more
    }       
}); 
  #checkDate{
    display: block;
    border: 1px solid red;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="checkDate">Check date</button> 
  
 
 
 您第一次单击checkDate时收到“未定义”警报的checkDate是setInterval尚未启动。 从那时起，你得到正确的百分比。  
 但是，当然，如果再次单击checkDate ，元素将返回到其原始大小，并且间隔将会重新启动（不确定这是否是您想要的）。 此外，当元素达到100％宽度时，至少再次点击它就不会发生任何事情。  
 如果您需要在checkDate达到100％时自动发生某些事情，您需要在间隔内检查（如JJJ所述）。 就像是：  
function checkDateCompleted() {
    // do something great here!
}

function frame() {
    if (width >= 100) {
        clearInterval(id);
        checkDateCompleted();
    } else {
        width++;
        elem.style.width = width + '%';
        percEntage  = document.getElementById("checkDate").innerHTML = width * 1 + '%';
    }
} 
 
 希望能帮助到你！ 
Contrary to what others have written, you don't need either defining in a more global scope (that is global enough!) or using window.percEntage. 
Actually, nothing prevents $("#checkDate").on("click", ... from accessing the percEntage variable. 
Have a look to the following snippet containing a simplified version of your code: 
 
 
  
  var percEntage;

function move() {
    var width = 10;
    var id = setInterval(frame, 50);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            $( "#checkDate" ).css( "width", width + '%');
            $( "#checkDate" ).html( width + "%" )
            percEntage = $( "#checkDate" ).html();
        }
    }   
}

$("#checkDate").on("click", function(){
    move();
    alert(percEntage);
    if(percEntage=="100%"){
	    alert( "Completed!" );
        //do something more
    }       
}); 
  #checkDate{
    display: block;
    border: 1px solid red;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="checkDate">Check date</button> 
  
 
 
The reason why you get an 'undefined' alert the first time you click on checkDate is that setInterval hasn't started yet. From then on you get the correct percentage. 
But, of course, if you click again on checkDate the element will return to its original size and the interval will be restarted (not sure if that is what you want). Also, nothing will happen when the element reaches the 100% width at least you click on it again. 
If you need that something happens automatically when checkDate reaches the 100% you need to be checking (as JJJ has stated) inside the interval. Something like: 
function checkDateCompleted() {
    // do something great here!
}

function frame() {
    if (width >= 100) {
        clearInterval(id);
        checkDateCompleted();
    } else {
        width++;
        elem.style.width = width + '%';
        percEntage  = document.getElementById("checkDate").innerHTML = width * 1 + '%';
    }
} 
 
Hope it helps!