javascript - setTimeout callback function not working -
i calling function using onclick inside button. called function inside object , getting called each second using settimeout. callback function not getting called settimeout , works first call.
if not use object , use encapsulating function returns startpomadoro function, working.
###html code ########## <div class="cold-md-12 text-center"> <button>set pomodoro</button> <input id="pomodoroinput" type="number"> <button>set break</button> <input id="breakinput" type="number"> </div> <div class="cold-md-12 text-center"><br> <button onclick="pomodoroclock.startpomodoro()">start pomodoro</button> </div> <div id="output"> </div> ### js code var pomodoroclock = { countpomadoro: 0, countbreak: 0, currenttimertext:'', startpomodoro: function(){ var pomadorotimeinminutes = document.getelementbyid('pomodoroinput').value; var breakinminutes = document.getelementbyid('breakinput').value; if(this.countpomadoro<pomadorotimeinminutes){ var minutesleftpomadoro = pomadorotimeinminutes - this.countpomadoro; this.currenttimertext = "your have " + minutesleftpomadoro + " minutes left."; this.countpomadoro++; this.displaypomadoro(); settimeout(this.startpomodoro, 1000); } else { if(this.countbreak<breakinmnutes){ var minutesleftbreak = this.breakinminutes - this.countbreak; currenttimertext = "your have " + minutesleftbreak + " minutes left in break."; this.countbreak++; this.displaypomadoro(); settimeout(this.startpomodoro, 1000); } else { this.currenttimertext=" break time up. "; this.displaypomadoro(); } } }, displaypomadoro: function(){ var pomodorohtmlelement = document.createelement('p'); var outputdiv = document.getelementbyid('output'); pomodorohtmlelement.textcontent=this.currenttimertext; outputdiv.appendchild(pomodorohtmlelement); } }
you had problem this
not being think, when function called settimeout
. try this:
var pomodoroclock = { countpomadoro: 0, countbreak: 0, currenttimertext: '', startpomodoro: function() { var = this; var pomadorotimeinminutes = document.getelementbyid('pomodoroinput').value; var breakinminutes = document.getelementbyid('breakinput').value; if (this.countpomadoro < pomadorotimeinminutes) { var minutesleftpomadoro = pomadorotimeinminutes - this.countpomadoro; that.currenttimertext = "your have " + minutesleftpomadoro + " minutes left."; that.countpomadoro++; that.displaypomadoro(); settimeout(function() { that.startpomodoro() }, 1000); } else { if (that.countbreak < breakinminutes) { var minutesleftbreak = that.breakinminutes - that.countbreak; currenttimertext = "your have " + minutesleftbreak + " minutes left in break."; that.countbreak++; that.displaypomadoro(); settimeout(function() { that.startpomodoro() }, 1000); } else { that.currenttimertext = " break time up. "; that.displaypomadoro(); } } }, displaypomadoro: function() { var pomodorohtmlelement = document.createelement('p'); var outputdiv = document.getelementbyid('output'); pomodorohtmlelement.textcontent = this.currenttimertext; outputdiv.appendchild(pomodorohtmlelement); } }
<div class="cold-md-12 text-center"> <button>set pomodoro</button> <input id="pomodoroinput" type="number"> <button>set break</button> <input id="breakinput" type="number"> </div> <div class="cold-md-12 text-center"><br> <button onclick="pomodoroclock.startpomodoro()">start pomodoro</button> </div> <div id="output"> </div>
ps. had typo breakinmnutes
instead of breakinminutes
.
Comments
Post a Comment