Javascript - Change return value using setTimeOut

1

Good people,

I needed to change the return value when I clicked the button, that is, first click would have to return false and passed x segundos would have to return true and proceed with the event.

The code is as follows:

$(".btnnext").on("click",function (e) {

if (newText != "" || newText2 != "" || newText3 != "" || newText4 != "") {


    var teste = false;


    setTimeout((function () {
        teste = true;
        console.log(teste);

        $(".btnnext").trigger("click");
        return teste;
    }), 2000);

    return teste;

}});

My approach was to first return false and later with the function setTimeout change the return value and simulate the click again on the button. Issue: The return value changes but the event does not progress, the second click does not work.

What I want is that when you click the button, for example, when you move from step 2 to step 3, take a x seconds

    
asked by anonymous 07.08.2018 / 11:39

2 answers

0

I ended up solving the problem in the following way (somewhat trivial and perhaps a little strange):

e.stopPropagation();

First stop the propagation of the event coming from the click on the link.

Then I make a new click on the same link after x seconds:

setTimeout(function () { $('.next #btnnext').unbind().trigger('click') }, 200);

My biggest mistake was to be clicking a button with a defined class and not an id. In my case the addition of the disable class did not work.

    
08.08.2018 / 17:29
2

I've changed the answer, see if it fits something similar to your need.

$('input').click(() => {
  
  $('input').attr('disabled','true');
  var cor = getRandomColor();
  var i = 1;
  var interval = setInterval(() => {
    //Toda sua logica vai ser feita aqui! 
    if(!$('#div'+i)[0]){
      clearInterval(interval);
      $('input').removeAttr('disabled');
      return;
    };
    $('#div'+i).css('background',cor);
    i++;
  },2000);
  
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
div{
  width: 50px;
  height: 50px;
  float:left;
  margin-left: 5px;
  background: red;
}

input{
  float:left;
  width: 100%;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<input type="button" value="Start">
    
07.08.2018 / 12:49