功能是一键延迟jquery

Question

 $(document).ready(function() { var digit = []; var digitStr; var displayDigit = []; var screen; function display() { displayDigit = digitStr.split(/[*/+-]/); for (var i = 0; i < displayDigit.length; i++) { screen = displayDigit[i]; }; }; function point() { if (digitStr.match(/[*/+-]?\\d*\\.\\d*$/)) { return; } else { digit.push("."); } }; function result() { var a = (displayDigit[0]) - 0; var b = (displayDigit[1]) - 0; screen = (a + b); }; function displayZero() { screen = 0; } $("button").on("click", function() { switch (this.id) { case "one": digit.push(1); break; case "two": digit.push(2); break; case "three": digit.push(3); break; case "four": digit.push(4); break; case "five": digit.push(5); break; case "six": digit.push(6); break; case "seven": digit.push(7); break; case "eight": digit.push(8); break; case "nine": digit.push(9); break; case "zero": digit.push(0); break; case "point": point(); break; case "add": digit.push("+"); break; case "subtract": digit.push("-"); break; case "multiply": digit.push("*"); break; case "divide": digit.push("/"); break; case "ce": digit.pop(); break; case "clear": digit = []; displayZero(); break; case "equal": result(); }; digitStr = digit.join(""); $("#second").text(digitStr); //display(); $("#main").text(screen); display(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> <div class="container"> <br> <div class="calc col-md-4"> <div class="row"><span id="main">0</span> </div> <div class="row small" id="second">0<p class="text-right"></p> </div><br> <!--<p>0</p>--> <div class="row first"> <button type="button" class="btn btn-danger" id="clear">Clear</button> <button type="button" class="btn" id="ce">CE</button> <button type="button" class="btn oper" id="add">+</button> </div><br> <div class="row second"> <button type="button" class="btn" id="seven">7</button> <button type="button" class="btn" id="eight">8</button> <button type="button" class="btn" id="nine">9</button> <button type="button" class="btn oper" id="subtract">-</button> </div><br> <div class="row third"> <button type="button" class="btn" id="four">4</button> <button type="button" class="btn" id="five">5</button> <button type="button" class="btn" id="six">6</button> <button type="button" class="btn oper" id="multiply">*</button> </div><br> <div class="row fourth"> <button type="button" class="btn" id="one">1</button> <button type="button" class="btn" id="two">2</button> <button type="button" class="btn" id="three">3</button> <button type="button" class="btn oper" id="divide">/</button> </div><br> <div class="row fifth"> <button type="button" class="btn" id="zero">0</button> <button type="button" class="btn" id="point">.</button> <button type="button" class="btn" id="equal">=</button> </div> </div> </div> 

I'm making a simple calculator and having a trouble with function display. If I call function at the end as it is shown in the example, it is one click late. I know that function first display the initial value of the global variable screen (an empty one) and I don't know how to stop it from doing it. If I call function before $("#main").text(screen); (it's commented in the example), it works fine but the functions inside the switch method stop working (result(), displayZero()). Function result is left on purpose as simple as a + b , so, please, use just a + b for testing. Any help will be appriciated.

$(document).ready(function(){

var digit = []; 
var digitStr;   
var displayDigit = []; 
var screen;

  function display(){  
displayDigit = digitStr.split(/[*/+-]/); 
for(var i = 0; i < displayDigit.length; i++){
  screen = displayDigit[i];         
};  
};

  function point(){    
 if(digitStr.match(/[*/+-]?\d*\.\d*$/)){
  return;       
}else{
  digit.push(".");           
}     
};   

  function result(){     
  var a = (displayDigit[0])-0;
  var b = (displayDigit[1])-0;    
  screen = (a+b);     
};  

 function displayZero(){
screen = 0;
}

$("button").on("click",function(){     
  switch(this.id){
    case "one": digit.push(1);                    
    break;
    case "two": digit.push(2);
    break;
    case "three": digit.push(3);          
    break;
    case "four": digit.push(4);       
    break;
    case "five": digit.push(5);          
    break;
    case "six": digit.push(6);          
    break;
    case "seven": digit.push(7);          
    break;
    case "eight": digit.push(8);                    
    break;
    case "nine": digit.push(9);          
    break;
    case "zero": digit.push(0);          
    break;
    case "point": point();          
    break;
    case "add": digit.push("+");          
    break;
    case "subtract": digit.push("-");          
    break;
    case "multiply": digit.push("*");          
    break;
    case "divide": digit.push("/");           
    break;
    case "ce": digit.pop();          
    break;
    case "clear": digit = [];
                  displayZero();
    break;
    case "equal": result();           
           };    

   digitStr = digit.join("");    
$("#second").text(digitStr); 
   //display();     
 $("#main").text(screen);  
   display();

});  
});

Answer 1

You have the solution in your code, you just need to call your display() function which updates the value for screen before you set the element for screen to the value of screen .

 $(document).ready(function() { var digit = []; var digitStr; var displayDigit = []; var screen; function display() { displayDigit = digitStr.split(/[*/+-]/); for (var i = 0; i < displayDigit.length; i++) { screen = displayDigit[i]; }; $("#main").text(screen); }; function point() { if (digitStr.match(/[*/+-]?\\d*\\.\\d*$/)) { return; } else { digit.push("."); } }; function result() { var a = (displayDigit[0]) - 0; var b = (displayDigit[1]) - 0; screen = (a + b); $("#main").text(screen); }; function displayZero() { screen = 0; } $("button").on("click", function() { switch (this.id) { case "one": digit.push(1); break; case "two": digit.push(2); break; case "three": digit.push(3); break; case "four": digit.push(4); break; case "five": digit.push(5); break; case "six": digit.push(6); break; case "seven": digit.push(7); break; case "eight": digit.push(8); break; case "nine": digit.push(9); break; case "zero": digit.push(0); break; case "point": point(); break; case "add": digit.push("+"); break; case "subtract": digit.push("-"); break; case "multiply": digit.push("*"); break; case "divide": digit.push("/"); break; case "ce": digit.pop(); break; case "clear": digit = []; displayZero(); break; case "equal": result(); return; }; digitStr = digit.join(""); $("#second").text(digitStr); display(); }); }); 

 body { /*background-image: url("http://www.publicdomainpictures.net/pictures/50000/velka/random-numbers.jpg"); background-size: 100%;*/ } .calc { background-color: oange; padding: 4%; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.45); border-radius: 5%; } #main { background-color: #cccccc; color: black; height: 50px; width: 100%; font-size: 30px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); border-radius: 5%; padding-left: 5%; font-family: 'Abril Fatface', cursive; } #second { height: 20px; font-size: 20px; } /*.well-small{ text-align: right; }*/ button { margin: 1%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } button:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } #clear, #equal { width: 48%; } #ce, #add, #seven, #eight, #nine, #subtract, #four, #five, #six, #multiply, #one, #two, #three, #divide, #zero, #point { width: 23%; } #seven, #eight, #nine, #four, #five, #six, #one, #two, #three, #zero, #point { background-color: gray; } #add, #subtract, #multiply, #divide { background-color: black; color: #ffd6cc; } #equal { background-color: black; color: red; font-weight: bold; } #ce { background-color: #ffd6cc; } .small { color: gray; padding-left: 5%; } /*p{ font-size: 200px; position: absolute; color: gray; }*/ footer { position: fixed; left: 0px; bottom: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> <div class="container"> <br> <div class="calc col-md-4"> <div class="row"><span id="main">0</span> </div> <div class="row small" id="second">0 <p class="text-right"></p> </div><br> <!--<p>0</p>--> <div class="row first"> <button type="button" class="btn btn-danger" id="clear">Clear</button> <button type="button" class="btn" id="ce">CE</button> <button type="button" class="btn oper" id="add">+</button> </div><br> <div class="row second"> <button type="button" class="btn" id="seven">7</button> <button type="button" class="btn" id="eight">8</button> <button type="button" class="btn" id="nine">9</button> <button type="button" class="btn oper" id="subtract">-</button> </div><br> <div class="row third"> <button type="button" class="btn" id="four">4</button> <button type="button" class="btn" id="five">5</button> <button type="button" class="btn" id="six">6</button> <button type="button" class="btn oper" id="multiply">*</button> </div><br> <div class="row fourth"> <button type="button" class="btn" id="one">1</button> <button type="button" class="btn" id="two">2</button> <button type="button" class="btn" id="three">3</button> <button type="button" class="btn oper" id="divide">/</button> </div><br> <div class="row fifth"> <button type="button" class="btn" id="zero">0</button> <button type="button" class="btn" id="point">.</button> <button type="button" class="btn" id="equal">=</button> </div> </div> </div> <footer>Created by IvanaGoSt</footer>