how to put sleep function in javascript?

Question

I am creating a game in html5 using javascript and I am having problem with sleep function. I want to hold off an isWin function for a few seconds before showing a popup declaring the person has won the game. here is part of the code.

modal: function (isWin) {
 var bgDarker = this.game.make.bitmapData(this.game.width, this.game.height);
 bgDarker.fill(50, 50, 50);
 bgDarker = this.game.add.button(0, 0, bgDarker, function () { }, this);
 bgDarker.tint = 0x000000;
 bgDarker.alpha = 0.5;

 var modalGroup = this.game.add.group();

 var bg = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 40,  (isWin ? "picWinPopup" : "picLostPopup"));
 bg.scale.setTo(1);
 bg.anchor.setTo(0.5);
 modalGroup.add(bg);
 
 var labelLevel2 = this.game.add.text(this.game.world.centerX + 100, this.game.world.centerY + 5, MatchingGame.indexImage, {
  font: "48px " + MatchingGame.fontFaces[3],
  fill: "#1a40ff",
  boundsAlignH: "center",
  boundsAlignV: "middle"
 });
 labelLevel2.anchor.setTo(0.5);
 modalGroup.add(labelLevel2);
    
 var labelTotalScore = this.game.add.text(this.game.world.centerX, this.game.world.centerY + 110, MatchingGame.score, {
  font: "34px " + MatchingGame.fontFaces[3],
  fill: "#ff2a5c",
  boundsAlignH: "center",
  boundsAlignV: "middle"
 });
 labelTotalScore.anchor.setTo(0.5);
 modalGroup.add(labelTotalScore);
 
 var btnReplay = this.makeButton("btnReplay", function (close) {
  btnReplay.bgDarker.destroy();
  btnReplay.modalGroup.destroy();
  if(MatchingGame.indexImage==6){
   MatchingGame.indexImage = 1;
  }
  this.game.stateTransition.to('Game');
     this.imgLive1.visible = true;
     this.imgLive2.visible = true;
     this.imgLive3.visible = true;
     MatchingGame.live = 3;
     MatchingGame.levelscore = 0;
 },this);
    //btnReplay.anchor.setTo(0.5);
 btnReplay.position.setTo(bg.position.x - 200, bg.position.y + 260)
 btnReplay.bgDarker = bgDarker;
 btnReplay.modalGroup = modalGroup;
 modalGroup.add(btnReplay);
 
 if (!isWin) {
  var btnEnd = this.makeButton("btnEnd", function (close) {
   btnEnd.bgDarker.destroy();
   btnEnd.modalGroup.destroy();
   
         this.imgLive1.visible = true;
         this.imgLive2.visible = true;
         this.imgLive3.visible = true;
         MatchingGame.live = 3;
         
         this.end();
  },this);
  btnEnd.position.setTo(bg.position.x + 200, bg.position.y + 260)
  btnEnd.bgDarker = bgDarker;
  btnEnd.modalGroup = modalGroup;
  modalGroup.add(btnEnd);
    }
    else {
     //setTimeout(3000);
     //var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);

     var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
   btnNextLevel.bgDarker.destroy();
   btnNextLevel.modalGroup.destroy();
   if(MatchingGame.indexImage==6){
    MatchingGame.indexImage = 1;
   } else {
    MatchingGame.indexImage = MatchingGame.indexImage+1;                 }
   this.game.stateTransition.to('Game');
         this.imgLive1.visible = true;
         this.imgLive2.visible = true;
         this.imgLive3.visible = true;
         MatchingGame.live = 3;
  },this);
  btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
  btnNextLevel.bgDarker = bgDarker;
  btnNextLevel.modalGroup = modalGroup;
  modalGroup.add(btnNextLevel); 
    }
    
    MatchingGame.live = 3;
 
 this.game.add.tween(modalGroup).from({ y: -800 }, 600, Phaser.Easing.Bounce.Out, true);
 this.game.world.bringToTop(modalGroup);
},

I did try to use sleep() and setTimeout() function but keep failing to implement it in javascript. can you help me solve this problem of putting a timer in javascript function? because I am having problem integrating setTimeout in javascript code that uses html5.

Possible duplicate of [Sleep/Pause/Wait in Javascript](http://stackoverflow.com/questions/7854820/sleep-pause-wait-in-javascript) — Sheepy, Feb 07 '17 at 07:30
no it's not, this is a javascript code that uses sprite and html5. so it's quite different in the solution. — , Feb 07 '17 at 07:36
If you know JavaScript - or just *really* read on of the many similar Q&A on stackoverflow or otherwise, you'll know sprite and html5 does not change how you delay js with setTimeout. Like I discussed in the js chat with your other account, the dup is the shortest that shown the correct usage, please read through it and don't use your imagination on how setTimeout should work. — Sheepy, Feb 07 '17 at 07:59

score 0 · Accepted Answer · answered Feb 07 '17 at 06:54

Use it like this

setTimeout(function() {
var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
                btnNextLevel.bgDarker.destroy();
                btnNextLevel.modalGroup.destroy();
                if(MatchingGame.indexImage==6){
                    MatchingGame.indexImage = 1;
                } else {
                    MatchingGame.indexImage = MatchingGame.indexImage+1;                                                                    }
                this.game.stateTransition.to('Game');
                this.imgLive1.visible = true;
                this.imgLive2.visible = true;
                this.imgLive3.visible = true;
                MatchingGame.live = 3;
            },this);
            btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
            btnNextLevel.bgDarker = bgDarker;
            btnNextLevel.modalGroup = modalGroup;
            modalGroup.add(btnNextLevel); }, 3000 );

score 0 · Answer 2 · answered Feb 07 '17 at 06:55

javascript is single thread, so there is no sleep/wait/stop. you should never make that only single thread stop working. if you want to delay some code, use setTimeout. however the proper way to use setTimeout is:

setTimeout(myFunction, 40000);

that is an example. see full details:

mdn setTimeout

score 0 · Answer 3 · answered Feb 07 '17 at 06:58

0

This may fit to your requirement var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);

answered Feb 07 '17 at 06:58

Sagar V

12,158
7
41
68

how to put sleep function in javascript?

3 Answers3