Vue wait 3 seconds before making request

Question

Because of my backend I need to wait 3 seconds before I'll make a fetchSyncedProductsResultRequest request. I was trying to use setInterval function but it won't work:

imports.js

const importSpreadsheetRequest = (self, payload, onSuccessCb, onErrorCb) => {
  const jwtToken = self.$store.state.idToken;

  return axios
    .post(`/api/v1/imports/products_batches/spreadsheet_load`, payload, {
      headers: {
        Authorization: `Bearer ${jwtToken}`,
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then((response) => onSuccessCb(response.data))
    .catch((error) => onErrorCb(error))
};

sync_products.rb

  watch: {
    loadId(newValue, oldValue) {
      if (!oldValue && newValue) {
        setTimeout(3000)
        fetchSyncedProductsResultRequest(this, newValue).then(response => {
          this.fetchedProductSyncResult = response.data
        });
      }
    }
  },

How to wait 3 seconds before making this call ?

[EDIT]

here is my updated code:

  watch: {
    loadId(newValue, oldValue) {
      if (!oldValue && newValue) {
        setTimeout(
          fetchSyncedProductsResultRequest(this, newValue).then(response => {
            this.fetchedProductSyncResult = response.data['results']
          }), 3000)
      }
    }
  },

To schedule something to happen at a later time, use [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) and pass it the function to execute and the delay in miliseconds. — David, May 23 '22 at 11:35
@David surprisingly `setTimeout` doesn't work and that's what I had in my code - that was my typo inside the question, already updated. Anyway, if I use `setInterval` it will work correctly. I do not understand why actually. — mr_muscle, May 23 '22 at 11:41
You're not using `setTimeout` correctly. You forgot to pass it the function to execute at the later time. It's effectively trying to "execute" `3000` (which doesn't do anything) immediately (since no second argument was provided). Please refer to the examples in [the documentation](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout). — David, May 23 '22 at 11:44
@David Ok, I put everything into `setTimeout` but it still doesn't work properly. It looks like it executes the request before this 3 seconds and then waits 3 seconds. If I declare request (line with `fetchSyncedProductsResultRequest`) inside `method: { ... }` the request will not be called at all. — mr_muscle, May 23 '22 at 12:03
Can you update the question with the updated code? If I were to *guess*, it sounds like you're *executing* a function immediately and passing its *result* to `setTimeout`, instead of passing a function callback to `setTimeout`. — David, May 23 '22 at 12:05
Additional duplicate question has been added. You're immediately invoking the function instead of passing a function reference to `setTimeout`. Wrap your operation in an anonymous function. (Just like the function references you're passing to all the other callbacks, e.g.: `setTimeout(() => someOperation(), 3000)` — David, May 23 '22 at 12:18

Vue wait 3 seconds before making request

0 Answers0