Add delay to javascript after button click

Question

I have this bit of script to reload a div on a click - which works for what I need it to do.

I want to add a delay to the reload of say 1-2 seconds with a load icon before it loads. I looked at setTimeout but I don't know where to put it.

https://codepen.io/jameswill77/pen/vYRpxVV

<a href="" id="something">click</a>


    <div id="mydiv">
    
    //content
    
    </div>
        </div>

setTimeout(function(){

$('#something').link(function() {
    $("#mydiv").reload();
});
}, 10000);

try this function like setTimeout(function(){ console.log('Stuff be done'); //This will be delayed for one second }, 1000); and call it on button click event. and put you code inside this function. — Groot
– Groot, Commented Jul 31, 2022 at 9:52

Asiqur Rahman · Accepted Answer · 2022-07-31 09:53:20Z

1

This code should work for you.

<a href="#" id="something">click</a>
<div id="mydiv">
    //content
</div>

<script>
    $( '#something' ).on( 'click', function ( event ) {
        event.preventDefault();
        
        // code before reload
        
        setTimeout( function () {
            $( "#mydiv" ).reload();
        }, 2000 ); // time in millisecond
    } );
</script>

answered Jul 31, 2022 at 9:53

Asiqur Rahman

4314 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Williams Over a year ago

I tried it, but I didn't get the delay, I've added in the script inside the DIV so you can see what I'm trying to reload <a id="something" href="">click</a> <div id="mydiv"> <div class="calculator" data-calc-id="ogNjyteRSgnEHv6Ps" data-type="framed"></div> <script src="scripts.convertcalculator.com/embed.js"></script> </div>

Collectives™ on Stack Overflow

Add delay to javascript after button click

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related