函数是一次点击迟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>

我正在制作一个简单的计算器并且在功能显示方面遇到了麻烦。如果我在结尾处调用函数，如示例中所示，则只需点击一下即可。我知道该函数首先显示全局变量 screen （一个空的）的初始值，我不知道如何阻止它执行它。 如果我在 $（“＃main”）之前调用函数。文本（屏幕）; （在示例中注释），它工作正常但是switch方法中的函数停止工作（result（）， displayZero（））。 功能结果就像 a + b 一样简单，所以请使用 a + b 进行测试。 任何帮助都会得到满足。

$(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

您的代码中包含解决方案，在将display()的元素设置为{{的值之前，您只需要调用screen函数来更新screen的值。 1}}。

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