Mam przycisk, który przełącza wartość „statusu” obiektu

1, 2, 3, 4

Za każdym razem, gdy użytkownik kliknie, przechodzi do następnej wartości, a następnie z powrotem do początku. Każde kliknięcie wysyła również zaktualizowaną wartość do bazy danych. Aby ograniczyć te żądania, chciałem dodać okno bufora, w którym użytkownik może szybko przełączać się między nimi i tylko wtedy, gdy zatrzymał się na powiedzmy 2 sekundy, wykonuje funkcję wysyłania żądania aktualizacji wartości.

Aktualny kod HTML

<button v-on:click="changeStatus(item)">Status</button>

JavaScript

changeStatus: function (item) {

    if (item.status < 4) {
        item.status++;
    } else {
        item.status = 1;
    }
// Add some delay buffer here
     this.updateDatabase(item);
 },

Korzystanie z VueJS, ale podstawowa idea powinna pozostać taka sama.

0
Ari 3 kwiecień 2020, 08:38

4 odpowiedzi

Najlepsza odpowiedź

Ustaw minutnik za pomocą setTimeout:

var updateTimer; // Global

...

changeStatus: function (item) {
  ...

  clearTimeout(updateTimer); // Unset previous timer, if any
  updateTimer = setTimeout(updateItem, 2000);
}

updateItem: function() {
  this.updateDatabase(item);
}
1
ariel 3 kwiecień 2020, 05:53

Moje rozwiązanie oparte na odpowiedzi Ariel, bardziej specyficzne dla vue.

Musiałem ustawić licznik czasu jako globalny w danych:

let app = new Vue({
    el: '#app',
    data: {
        updateTimer: "",
    },
    methods: {

    doSomething: function (item) {

        // Do immediate actions here


        clearTimeout(this.updateTimer);
        this.updateTimer = setTimeout(function(){
            // Do buffered/delayed actions here
            app.updateDatabase(item)
        }, 2000);


      },

    }
})
0
Ari 3 kwiecień 2020, 05:53

Możesz zapisać czas ostatniego kliknięcia i porównać go z aktualnym czasem:

var lastClickedTime = 0

document.getElementById('myButton').addEventListener('click',function(){
  var timeNow = new Date();
  var difference = timeNow - lastClickedTime;
  difference = difference / 1000;
  if(difference >= 3){ // 3 Seconds
    console.log("Last click was "+difference+" seconds ago");
  }
  lastClickedTime = new Date();
});
<button id="myButton">Click Me</button>
1
xTrimy 3 kwiecień 2020, 05:51

Utworzyłbym konstruktora Waiter, którego możesz użyć w dowolnym zdarzeniu. Po prostu utwórz instancję new dla innej Waiter:

addEventListener('load', ()=>{

function Waiter(milliseconds){
  let yes = true;
  this.wait = func=>{
    if(yes){
      func(); yes = false;
      setTimeout(()=>{
        yes = true;
      }, milliseconds);
    }
    return this;
  }
}
const testWaiter = new Waiter(2000);
document.getElementById('test').onclick = function(){
  testWaiter.wait(()=>{
    console.log(this.id);
  });
}

});
<input id='test' type='button' value='click here' />
1
StackSlave 3 kwiecień 2020, 06:10