在第一次单击按钮时添加重定向，然后在特定时间禁用它，即使在使用 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>