Hide Div after x seconds after running action

Question

Good morning Galera,

I have in my home , a field to consult CPF. The field has only one text field , where I inform the CPF, if I find some Cpf in the database , it returns me some data.I submit the form with ajax , not to reload the page , on the page that makes the query , I play the data in an array and convert it to json , recover the value in my home and print them.

The div that showed the data, I leave it hidden: <style>style:display:none;</style> When I press the button to search, it displays a table with the data :

    <script>
$("#btnConsulta").click
    (
        function()
            {
                var show =  $("#divForm").css("display","block");
            }
    );
</script>

ate ai blz. But I would like the div with this table to be hidden again ,apos x seconds.

fix the code :

function hideDiv()
            {
                $("#divForm").css("display","none");
            }

And I used setInterval to run it after x seconds. But if I define that I will call the hide function in 10 seconds , if I enter the page , wait 5 seconds and search , my div will only be visible for 5 more .

I would like the setInterval to start counting after I press the search button.

EDIT :----------

Code I use to submit the form and take the data.

<script type="text/javascript">
    function consultaCpf()
    {
        jQuery(document).ready(function(){
        jQuery('#form1').submit(
        function(){
            var dados = jQuery( this ).serialize();
            jQuery.ajax
                (
                    {
                        type: "POST",
                        url: "/admin2/inc/ajaxSubmit/consultaCpf.php",
                        data: dados,
                        dataType: "json",
                        success: function(json)
                        {
                            $('#nomeVendedor').html( json.vendedor);
                            $('#nomeCliente').html( json.cliente );
                            $('#cpfCliente').html( json.cpf );
                        }
                    }
                );

                return false;
            });
        });
    }

consultaCpf();
</script>

Here he sends the form to the page consultCpf.php.

On the page consultCpf.php :

$return = array();
$cpf = $_POST['txtCpf'];

$sql = mysql_query("SELECT vendedor,nomeCliente,cpf
 FROM tblVenda where cpf = '$cpf' ");

    while($row = mysql_fetch_array($sql))
      { 
            $vendedor = $row['vendedor'];
            $cliente = $row['nomeCliente'];
            $cpf2 = $row['cpf'];
      }
$return['vendedor'] = $vendedor;
$return['cliente'] = $cliente;
$return['cpf'] = $cpf2;

echo json_encode($return);

---

From now on, grateful

Answer 1

Who will help you here is the setTimeout. Simply put, you can do:

$("#btnConsulta").on('click', function(){
    setTimeout(function(){
        $("#divForm").css("display","none");
    }, 5000);  
}); 

Basically, the #divForm will disappear 5 seconds after #btnConsulta is clicked.

EDIT:

It took me a while to understand your goal but, after the talk in the comments, I got there. The final code is:

$("#btnConsulta").on('click', function(){
    $("#divForm").css("display","block");
    setTimeout(function(){
        $("#divForm").css("display","none");
    }, 5000);  
});

It is worth remembering that initially, #divForm must have display:none. By clicking on #btnConsulta, #divForm is immediately shown, and hidden again after 5 seconds.

EDIT ²:

As mentioned by @ctgPi, this solution is bugged. In case the user is very loco and click the button several times, the timing to work. A workaround in this case would hide the button during the same 5 seconds as #divForm appears, but this may not be as efficient.

Answer 2

I think you want something on that line here:

updateDiv = (function () {
    var currentTimeout = null;
    var myDiv = document.getElementById('myDiv');
    return function (divContent) {
        myDiv.textContent = divContent;
        if (currentTimeout !== null) {
            clearTimeout(currentTimeout); }
        currentTimeout = setTimeout(function () {
            currentTimeout = null;
            hideDiv();
        }, 10000);
    };
})();

Then you would use updateDiv as the callback of your AJAX: not only do I shoot the setTimeout only when the answer comes back (avoiding the problem you mentioned), but if the user makes another query in this interval of 10 seconds, I cancel the previous timeout (if you do not, the second query will be closed 10 seconds after the first consultation).

---

Edited: in the code you put: you would declare a global variable right after opening the <script>:

<script type="text/javascript">
    var currentTimeout = null;
    function consultaCpf()
    {
        …

...and in the jQuery.ajax you would do

success: function(json)
{
    $('#nomeVendedor').html( json.vendedor);
    $('#nomeCliente').html( json.cliente );
    $('#cpfCliente').html( json.cpf );
    if (currentTimeout !== null) {
        clearTimeout(currentTimeout); }
    currentTimeout = setTimeout(function () {
        currentTimeout = null;
        hideDiv();
    }, 10000);
}