Question

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

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

Answer 1

在代码中的任何地方使用window.percEntage而不是percEntage，这样您就可以确保每次都引用相同的percEntage。

Answer 2

与其他人所写的相反，您既不需要在更全局的范围内定义（足够全球！），也不需要使用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时收到“未定义”提醒的原因是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 + '%';
    }
}

希望它有所帮助！

从一个函数到另一个函数的变量

2 个答案: