Javascript - Change return value using setTimeOut

Asked

Viewed 147 times

1

Good staff,

I needed to change the return value by clicking the button, i.e., first the click would have to return false and past 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. Problem: The return value is changed but the event does not advance, the second click does not work.

FOTO

What I want is that when you click the button, for example, when you go from step 2 to step 3, it takes one x seconds

javascript jquery

  • The question is what logic are you trying to achieve with this ? Because it will certainly have simpler and more direct forms for such

  • @Isac I believe there is a simpler way, this was only my approach if there is an easier/better direct. The main goal is to click the stop button on the event caused by it (stay in the same DOM x seconds) and then advance.

  • 1

    Explain in visual words and things what you want to happen, not how you’re trying to solve the problem. You want to click a button and have it stay a few seconds on the page and then be removed ?

  • It is best to use ajax to make the request to the backend and only when you get the response of ajax refreshes the page and/or navigates to another location. So he does everything as he’s supposed to and without skulking.

  • @Isac the problem here is the change of the DOM from the button, the click on the button is that triggers the accounts and how the domain changes the accounts do not come out correct. I really need to click the button, "delay" your action a little.

  • 1

    How are you triggering the start of doing the math in the backend? Can you add that information to the answer? It seems to me that the @Isac suggestion is ideal, when clicking the button, asking AJAX and when you receive the result from the server, redirects the user to the next page.

  • I was wrong, I mean, with backend wanted to say the click of the button that is represented in the code. I just did not put it because it is a little long... So the same click triggers the accounts and the change of the DOM.

Show 2 more comments

2 answers

3

I changed the answer, see if it fits into 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>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<input type="button" value="Start">

  • Thanks for the answer. This solution has a problem, the click on the button do not me to change the DOM (or page). I had already tested by disable button or even function preventDefault(), but nothing works

  • @Adrianomaia, can I change the answer to your need, you want to stop the change in gift ? what exactly you want to happen when the user clicks on it, try to talk about it in the very basic way so I can help you

  • I edited my question see if it helps

  • But basically I want that when it goes from step 2 to step 3 (with the click of the button that is represented in the code) it takes x seconds, because when it passes step some fields are hidden, which leads to the DOM changes and the accounts come out exchanged.

  • Okay, I’ll change the answer!

  • @Adrianomaia see the change I made!

  • does not work because when clicking the button it advances in it to the next step... it ignores the disable attribute

Show 2 more comments

1


I ended up solving the problem as follows (a little trivial and perhaps a little strange):

e.stopPropagation();

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

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

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

My biggest mistake was clicking on a button with a defined class and not an id. In my case the addition of the class disable didn’t work.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.