CODEWITHSUNDEEP
javascriptjqueryfunctionsettimeout
Agustín Osorio
Agustín Osorio

Reputation: 101

setTimeout not working on my onlick event

i need run a function only 5 seconds after clicking the button.

the console show me this message:

VM9200:1 Uncaught ReferenceError: getId is not defined at :1:1

function getId() {
  $.getJSON("https://maxtechglobal.com/vencimientos/perfil/perfil.php?cuit="+$("#cuit").val(), function(result){
    for (var i = 0; i < result.data.length; i++) {
      $.each(result.data[i].perfil, function( index, value ) {
        var id = result.data[i].perfil.id;
        $("#idPerfil").val(id);
      });
    }
  });
}
<button id="btnBuscar" onclick="setTimeout('getId()', 5000);" type="button" class="btn btn-primary text-center" name="button">Buscar</button>

i prove this: setTimeout(getId, 5000); and this setTimeout("getId();", 5000); and this: setTimeout('getId', 5000);

but anything work

Upvotes: 2

Views: 2120

Answers (4)

Manoj A
Manoj A

Reputation: 335

setTimeout accepts a reference to a function as the first argument. This can be the name of a function:

function explode(){
   console.log('called!');
}
setTimeout(explode, 5000);

A variable that refers to a function:

var explode = getId(){
   console.log('called!');
};
setTimeout(explode, 5000);

Or an anonymous function:

setTimeout(getId(){
   console.log('called!');
}, 5000);

It is also possible to pass setTimeout a string of code for it to execute:

setTimeout("console.log('called!');", 5000);

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12161

Here you go with a solution 

$('#btnBuscar').click(function(){
  setTimeout(function(){
    $.getJSON("https://maxtechglobal.com/vencimientos/perfil/perfil.php?cuit="+$("#cuit").val(), function(result){
      for (var i = 0; i < result.data.length; i++) {
        $.each(result.data[i].perfil, function( index, value ) {
          var id = result.data[i].perfil.id;
          $("#idPerfil").val(id);
        });
      }
    });
  }, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnBuscar" type="submit" class="btn btn-primary text-center" name="button">Buscar</button>

Since you are jQuery, so I used click event of jQuery.

$('#btnBuscar').click(function(){});

I've used setTimeout inside click method & added the lines of code within that (rather than closing another function).

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337714

getId() needs to be declared under the window scope when you use an on* event attribute. I'm betting you've placed it under a document.ready handler instead.

Also note you can improve the code and avoid this problem by passing the function reference to the timeout and by using an unobtrusive event handler instead of the outdated on* attribute. Try this:

function getId() {
  console.log('called!');

  // your AJAX logic here...
}

$(function() {
  $('#btnBuscar').click(function() {
    setTimeout(getId, 5000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnBuscar" type="button" class="btn btn-primary text-center" name="button">Buscar</button>

Upvotes: 2

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

Here you are - working example

function getId() {
  alert('function');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnBuscar" onclick="setTimeout(getId, 3000);" type="button" class="btn btn-primary text-center" name="button">Buscar</button>

Upvotes: 0

Related Questions