Отключение кнопки после нажатия на определенный период времени даже после перезагрузки страницы - PullRequest
Новая
       75

Отключение кнопки после нажатия на определенный период времени даже после перезагрузки страницы

1 голос
/ 06 августа 2020

Я работаю над простой системой заказа POS-ресторанов. Здесь пользователи могут добавлять товары в свою корзину и легко оформлять заказ. Я пытаюсь реализовать, что пользователь может только один раз щелкнуть кнопку проверки для определенного c времени и когда снова включить кнопку времени.

К настоящему времени я отключил кнопку для указанного c времени, но это не очень хорошее решение, потому что при обновлении страницы sh кнопки снова активируются.

DEMO: Можно найти здесь .

Html: 

<body>
    <div>
        <button>checkout</button>
    </div>
</body>

Jquery: 

$.fn.disableFor = function(mins, secs) {
    var i = [],
    play = [];

    this.click(function() {
        var selector = $(this),
        inDex = $(selector).index(),
        prevText = $(selector).text();
        i[inDex] = 0;
        var inSeconds = mins * 60 + secs;

        $(selector).prop("disabled", "disabled");
        
        play[inDex] = setInterval(function() {
            if(inSeconds > 60){
                inSeconds = inSeconds - 1;
                var minutes = Math.floor(inSeconds / 60);
                var seconds = inSeconds % 60;
                if(minutes >= 1){
                    if(seconds.toString().length > 1){
                        $(selector).text(minutes + ":" + seconds + " minutes left");
                    }else{
                        $(selector).text(minutes + ":" + "0" + seconds + " minutes left");
                    }
                }else{
                    $(selector).text(seconds + " seconds left");
                }
            }else{
                if(inSeconds > 1){
                    inSeconds = inSeconds - 1;
                    if(inSeconds.toString().length > 1){
                        $(selector).text(inSeconds + " seconds left");
                    }else{
                        $(selector).text("0" + inSeconds + " seconds left");
                    }
                }else{
                    $(selector).prop("disabled", "");
                    clearInterval(play[inDex]);
                    $(selector).text(prevText);
                }                              
            }
        }, 1000);
    });
};

$(function() {
    $("button").disableFor(2,0); // First parameter stands for minutes and the second for the seconds.
});

Ответы [ 3 ]

2 голосов
/ 06 августа 2020

Я думаю, что этот код не требует пояснений. Сообщите мне, если что-то непонятно.

Я использовал localStorage (как и AlwaysHelping в его ответе), который, к сожалению, не работает в песочнице StackOverflow. Вы можете сохранить его как файл html и открыть его локально для проверки. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div>
        <button>checkout</button>
    </div>
</body>

<script>
    const button = $('button');
    const pauseTime = 8 * 1000; // 8 seconds

    let cache = retrieveDisableTime();
    let disabledTime;
    let currentTime;
    let interval;

    button.on('click', function(){
      disabledTime = + new Date();
      cache = {time: disabledTime};
      saveDisableTime(cache);
      button.prop("disabled", "disabled");
      setTimer();
    });

    if(shouldButtonBeOff()) {
        button.prop("disabled", "disabled");
        setTimer();
    }

    function shouldButtonBeOff() {
        disabledTime = cache ? cache.time : false;
        currentTime = + new Date();
        return disabledTime && disabledTime + pauseTime > currentTime;
    }

    function setTimer() {
        interval = setInterval(function() {
            console.log('Not yet ready');

            if(!shouldButtonBeOff()) {
                console.log('READY');
                button.prop("disabled", false);
                clearInterval(interval);
            }
        }, 1000);
    }

    function saveDisableTime(obj) {
      localStorage.setItem('disableButton', JSON.stringify(obj));
    }

    function retrieveDisableTime() {
      return JSON.parse(localStorage.getItem('disableButton'));
    }

</script>
2 голосов
/ 06 августа 2020

Вам необходимо использовать браузер localStorage для хранения секунд.

После того, как вы нажмете кнопку оформления заказа, мы будем setItem время как seconds - В setIterval мы будет обновлять время, оставшееся на кнопке, и как только время достигнет предела конца, мы удалим, используя removeItem, localStorage из browser.

Если пользователь обновит страница оформления заказа (здесь появляется ваш вопрос) - Мы нажимаем кнопку оформления заказа, и мы проверим, осталось ли время в localStorage для нашего ключа, который мы установили ранее.

Если осталось нет оставшееся время, мы будем использовать запуск часов с 1 minutes and 15 seconds ИЛИ иначе мы будем start в оставшееся время, используя getItem в localStorage.

Я протестировал этот код, и он отлично работает.

Демо: (Вам нужно попробовать это в своем собственном браузере - localStorage не поддерживается в этом фрагменте.) 

$.fn.disableFor = function(mins, secs) {
  var i = [],
    play = [];

  this.click(function() {
    var selector = $(this),
      inDex = $(selector).index(),
      prevText = $(selector).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", "disabled");

    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) {
            $(selector).text(minutes + ":" + seconds + " minutes left");
          } else {
            $(selector).text(minutes + ":" + "0" + seconds + " minutes left");
          }
        } else {
          $(selector).text(seconds + " seconds left");
        }
      } else {
        localStorage.setItem('time', inSeconds); //Set time again
        if (inSeconds > 1) {
          inSeconds = inSeconds - 1;
          if (inSeconds.toString().length > 1) {
            $(selector).text(inSeconds + " seconds left");
          } else {
            $(selector).text("0" + inSeconds + " seconds left");
          }
        } else {
          localStorage.removeItem('time');
          $(selector).prop("disabled", "");
          clearInterval(play[inDex]);
          $(selector).text(prevText);
        }
      }
    }, 1000);
  });
};

$(function() {
  $("button").disableFor(1, 15); // First parameter stands for minutes and the second for the seconds.
});
div {
  margin: 0 auto;
  padding: 10px;
  vertical-align: middle;
  background-image: -moz-linear-gradient(bottom, white 0%, #CCC 100%);
  background-image: -o-linear-gradient(bottom, white 0%, #CCC 100%);
  background-image: -webkit-linear-gradient(bottom, white 0%, #CCC 100%);
  background-image: -ms-linear-gradient(bottom, white 0%, #CCC 100%);
  background-image: linear-gradient(bottom, white 0%, #CCC 100%);
}

button {
  color: #2b2b2b;
  text-shadow: 0 1px 0 #999;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 5px;
  border-radius: 12px;
  -moz-box-shadow: 4px 4px 4px #CCC;
  -o-box-shadow: 4px 4px 4px #CCC;
  -ms-box-shadow: 4px 4px 4px #CCC;
  -webkit-box-shadow: 4px 4px 4px #CCC;
  box-shadow: 4px 4px 4px #CCC;
}

button:hover {
  color: #3c3c3c;
  background-image: -moz-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
  background-image: -o-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
  background-image: -ms-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
  background-image: -webkit-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
  background-image: linear-gradient(top, #CCC 0%, white 20%, #666 100%);
}

button:disabled {
  color: #999;
  cursor: default;
  background: #CCC;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <button>checkout</button>
  </div>
</body>
1 голос
/ 06 августа 2020

Попробуйте следующее: 

//start cookies functions
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function removeCookie(cname) {
  document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
//end cookies functions

var cookieCheckout = getCookie('checkouttime');
var secondsTimeout = 0;
var delayTime = 2*60;
if (cookieCheckout && cookieCheckout != "") {// if we have cookie then set cookie seconds, when load page
  secondsTimeout = delayTime - Math.round((Date.now() - parseInt(cookieCheckout)) / 1000);
  if (secondsTimeout > delayTime) {
    removeCookie('checkouttime');
    //make checkout button enable
  } else {
    //make checkout button disable
  }
}

setCookie('checkouttime', Date.now(), 30);// set timestamp, when you click on enable checkout


if (secondsTimeout > delayTime) { //if time more then need limit then refresh timer, inside interval
  removeCookie('checkouttime');
  //make checkout button enable
}
...