How to show button after refreshing the page with delay time?

Question

I created one small function, what I want, after refreshing the page, is the button to show with some delay time..

I mean, for example, if I click the modify div, the page is going to refresh and show the button with 5000ms delay ( Refresh after 5000ms delay then the button wants to show).

Here is my fiddle..

FIDDLE HERE

I hope my question is understandable..

Here is my example snippet here..

// after page refresh show button with 5000ms delay

$(document).ready(function() {
  $("#modify_sec").click(function() {
    location.reload();
  }, 5000);
  $("#sec_get").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <ol class="breadcrumb float-sm-right cash-icons">

    <li class="breadcrumb-item mdfy_icon" id="modify_sec"><a href="#">Modify</a></li>
  </ol>
</div>

<!-- button -->

<div class="col-2">
  <div class="data_btn" id="sec_get">
    <button type="button" id="getBtn">Get data</button>
  </div>
</div>

score 0 · Answer 1 · answered Oct 29 '19 at 10:33

0

you can set a timeout with a delay you want in milliseconds :

setTimeout(function(){ $("#sec_get").show(); }, 5000);

answered Oct 29 '19 at 10:33

nabilinfo

47
6

Same here bro! i dont need to show button everytime refresh.. means if i click F5, it will shown the button, i dont need that, i want only click this function refresh page and show the button.. – Joe Oct 29 '19 at 11:29

Mahesh S · Answer 2 · 2019-10-29T12:00:54.887

0

Hope this help you. I have tested this on fiddle but i think the code wont work here due to LocalStorage.

// after page refresh show button
$(document).ready(function() {
    $("#modify_sec").click(function() {
        window.localStorage.setItem("isLink", false);
        location.reload();
    });
  if(window.localStorage.getItem("isLink"))
   $('#modify_sec').addClass('hide');
  setTimeout(function(){
    $("#sec_get").removeClass('hide');
  },5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <ol class="breadcrumb float-sm-right cash-icons">

    <li class="breadcrumb-item mdfy_icon" id="modify_sec"><a href="#">Modify</a></li>
  </ol>
</div>

<!-- button -->

<div class="col-2">
  <div class="data_btn hide" id="sec_get">
    <button type="button" id="getBtn">Get data</button>
  </div>
</div>

edited Oct 29 '19 at 12:00

answered Oct 29 '19 at 11:04

Mahesh S

373
1
3
19

Yes bro! but i dont need to show everytime refresh.. means if i click F5 it will shown the button, i dont need that, i want only click this function refresh page and show the button.. – Joe Oct 29 '19 at 11:29
It means when clicking on link, then only show button after few second, and when the f5 it should show instantely, right? – Mahesh S Oct 29 '19 at 11:32
No no no!! i dont want to show this button instantely, when i click this link, the page wants to refresh and show the button only.. – Joe Oct 29 '19 at 11:36
@Joe I have update my answer, We can use localStorage to keep the track on button click. – Mahesh S Oct 29 '19 at 12:01

How to show button after refreshing the page with delay time?

2 Answers2