在第一次單擊按鈕時添加重定向，然后在特定時間禁用它，即使在使用 jQuery 重新加載頁面后也是如此

Question

我正在嘗試實現用戶只能在結帳按鈕上單擊一次，並且當用戶在一段時間后再次嘗試訂購時，他必須等到按鈕再次啟用。

購物車樣本圖片

到目前為止我做了什么：

到目前為止，我已經成功地在 js 代碼中禁用了特定時間的按鈕。

檢查這個GIF： https://gifyu.com/image/c25b

試圖完成的事情

• 我正在尋找一種方法，如果用戶第一次結帳然后第一次單擊結帳按鈕將用戶重定向到（thankyou.php）頁面。

• 可以說，現在用戶在一段時間后嘗試再次訂購，這個時間按鈕將禁用讓我們說 10 秒......意味着用戶必須等待 10 秒才能下一次結帳......但現在我面臨一些並發症......參考上面的GIF

您可以在 GIF 文件中看到我正在嘗試在按鈕被禁用時重新加載頁面...您可以看到按鈕再次啟用，並且在我點擊重新加載按鈕后倒計時暫停...

我看的是禁用結帳按鈕，即使頁面刷新多次，倒計時仍然需要在后面繼續......無論用戶在什么網頁上......

我真的被困在這些步驟中，如果有人指導我，我將非常感激......在我的上述並發症中。下面是我的代碼......

 $.fn.disableFor = function(mins, secs) { var i = [], play = []; $("#check_out_cart").click(function() { var selector = $("#check_out_cart"), inDex = $(selector).index(), prevText = $("#timer").text(); i[inDex] = 0; //Store seconds var inSeconds = mins * 60 + secs; //Get the previous stored seconds - check local storage var retrievedObject = localStorage.getItem('time'); if (retrievedObject) { inSeconds = retrievedObject; } //Disable button $(selector).prop('disabled', true); play[inDex] = setInterval(function() { if (inSeconds > 60) { localStorage.setItem('time', inSeconds); //Set time again inSeconds = inSeconds - 1; var minutes = Math.floor(inSeconds / 60); var seconds = inSeconds % 60; if (minutes >= 1) { if (seconds.toString().length > 1) { $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + seconds + " minutes left"); } else { $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + "0" + seconds + " minutes left"); } } else { $('#timer').html("<i class='fas fa-clock' ></i> " + seconds + " seconds left"); } } else { localStorage.setItem('time', inSeconds); //Set time again if (inSeconds > 1) { inSeconds = inSeconds - 1; if (inSeconds.toString().length > 1) { $('#timer').html("<i class='fas fa-clock' ></i> " + inSeconds + " seconds left"); } else { $('#timer').html("<i class='fas fa-clock' ></i> " + "0" + inSeconds + " seconds left"); } } else { localStorage.removeItem('time'); $(selector).prop("disabled", false); clearInterval(play[inDex]); $('#timer').html(prevText); } } }, 1000); }); }; $(function() { $("#check_out_cart").disableFor(0, 10); // First parameter stands for minutes and the second for the seconds. });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="popover_content_wrapper"> <span id="cart_details"></span> <div align="right"> <button class="btn btn-success" id="check_out_cart"> <span class="glyphicon glyphicon-shopping-cart"></span> Checkout </button> <button class="btn btn-default" id="clear_cart"> <span class="glyphicon glyphicon-trash"></span> Remove all</button> </div> <div align="right"> <small id="timer">Ready to checkout.</small> </div> </div>

Answer 1

這是適合您的工作解決方案（經過測試並在我的瀏覽器中工作）。 您需要為您將執行的每個結帳添加localStorage ，並且在localStorage中您已經在節省seconds

一旦timer達到zero ，用戶將被重定向到thankyou.php ，並且在該頁面中，您將刪除為此結帳設置的localStorage 。

如果您可以再次返回checkout並按下checkout按鈕，則計時器從 10 秒開始，如果您在該時間內刷新並再次按下結帳，計時器將從剩余時間開始，一旦該時間結束，我們會將用戶重定向到thankyou.php頁面，我們將再次刪除localStorage 。

無論您完成多少次結帳，此過程都會一遍又一遍地 go沒有任何問題。

結帳 HTML

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="popover_content_wrapper">
  <span id="cart_details"></span>

  <div align="right">

    <button class="btn btn-success" id="check_out_cart">
                 <span class="glyphicon glyphicon-shopping-cart"></span> 
                Checkout
              </button>

    <button class="btn btn-default" id="clear_cart">
              <span class="glyphicon glyphicon-trash"></span> Remove all</button>
  </div>

  <div align="right">
    <small id="timer">Ready to checkout.</small>
  </div>
</div>

jQuery

正如你在這里看到的，我已經添加了window.location.href將用於重定向，我正在重定向它thankyou.php頁面一旦timer達到0

<script>

//Click event for disabled first time
$("#check_out_cart").click(function() {
  //Set local storage
  var checkFirst = localStorage.hasOwnProperty('firstTime'); 
  if (!checkFirst) {
    localStorage.setItem('firstTime', true); //Set first time entry
  }
  //Disable for 10 seconds if its not a first time.
  disableFor(0, 10)
});

//Disable checkout function
function disableFor(mins = null, secs = null) {

  var checkRevist = localStorage.getItem('firstTime'); 
  if (checkRevist == 'true') {
    window.location.href = 'thankyou.php'; //Redirect to thank you page.
    //Set it to false
    localStorage.setItem('firstTime', false); //Set first time entry
  } else {
    var i = [],
      play = [];
    var selector = $("#check_out_cart"),
      inDex = $(selector).index(),
      prevText = $("#timer").text();
    i[inDex] = 0;

  //Store seconds
  var inSeconds = mins * 60 + secs;

  //Get the previous stored seconds - check local storage
  var retrievedObject = localStorage.getItem('time');
  if (retrievedObject) {
    inSeconds = retrievedObject;
  }

  //Disable button
  $(selector).prop('disabled', true);

  play[inDex] = setInterval(function() {
    if (inSeconds > 60) {
      localStorage.setItem('time', inSeconds); //Set time again
      inSeconds = inSeconds - 1;
      var minutes = Math.floor(inSeconds / 60);
      var seconds = inSeconds % 60;
      if (minutes >= 1) {
        if (seconds.toString().length > 1) {
          $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + seconds + " minutes left");
        } else {
          $('#timer').html("<i class='fas fa-clock' ></i> " + minutes + ":" + "0" + seconds + " minutes left");
        }
      } else {
        $('#timer').html("<i class='fas fa-clock' ></i> " + seconds + " seconds left");
      }
    } else {
      localStorage.setItem('time', inSeconds); //Set time again
      if (inSeconds > 1) {
        inSeconds = inSeconds - 1;
        if (inSeconds.toString().length > 1) {
          $('#timer').html("<i class='fas fa-clock' ></i> " + inSeconds + " seconds left");
        } else {
          $('#timer').html("<i class='fas fa-clock' ></i> " + "0" + inSeconds + " seconds left");
        }
      } else {
        window.location.href = 'thankyou.php'; //Redirect to thank you page.
        $(selector).prop("disabled", false);
        clearInterval(play[inDex]);
        $('#timer').html(prevText);
      }
    }
  }, 1000);
  }
}

//Checking on page reload if there is a time left - time > 0
$(function() {
  //Get the previous stored seconds - check local storage
  var retrievedObject = localStorage.getItem('time');
  if (retrievedObject) {
    //Check previous timer - if page reloaded.
    disableFor()
  }
});
</script>

謝謝。php

這將是您的感謝頁面 php。 在這里，您將remove每次checkout的時間的localStorage 。

<?php

?>

<div id="popover_content_wrapper">
 <h1>Thanks you!!!!</h1>
</div>

<script>

//Remove storage
localStorage.removeItem('time');

</script>