При нажатии на checkbox ожидать нажатие другого или отправить запрос. Как можно это организовать?

Question

[Sasha294]

Мне нужно при выборе одного checkbox нужно ожидать 1.5 секунды нажатия другого checkbox или отправить запрос. Как можно организовать такое ожидание?

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>

Пример. Документация.

Comments

[Sasha294]

А у тебя есть такая срока "v-model="form.c2", а возможно ли такое "v-model="form.c2.value"

[Александр]

Sasha294, так она сразу value кладет. Почитайте про v-model в документации.

Answer 2

[Николай]

Проверять состояние нужного checkbox (:checked), если оно изменилось ждать 1.5 сек и выполнять твои условия.

Comments

[Sasha294]

с помощью реактивности проверять и не создаст ил это других потоков?