When a checkbox is clicked, wait for another one to be clicked or submit a request. How can this be organized?

Question

Vue.js

I need to wait 1.5 seconds for another checkbox to be pressed when selecting one checkbox or send a request. How can this expectation be organized?

Answer 1

<template>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c1"
    />
    Check 1
  </label>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c2"
    />
    Check 2
  </label>
  <pre>{{ form }}</pre>
</template>

<script>
const debounce = (handle, duration = 0) => {
  let timeout = null;

  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => handle.apply(this, args), duration);
  };
};

export default {
  name: 'App',
  data() {
    return {
      form: {}
    };
  },
  methods: {
    checkboxChange() {
      this.form.date = Date.now();
    }
  },
  created() {
    this.debouncedCheckboxChange = debounce(this.checkboxChange, 1500);
  }
};
</script>

Example . Documentation .

Answer 2

Check the state of the desired checkbox (:checked), if it has changed, wait 1.5 seconds and fulfill your conditions.