Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seems debounce do not work #1

Open
SergeyMiracle opened this issue Oct 30, 2018 · 3 comments
Open

Seems debounce do not work #1

SergeyMiracle opened this issue Oct 30, 2018 · 3 comments
Labels
help wanted Extra attention is needed

Comments

@SergeyMiracle
Copy link

Well i have latest version...
Some base service

export const BaseHttpService = new ApiService({
  adapter: fetch,
  url: process.env.VUE_APP_API_SERVER_URL + '/api',
  mode: 'cors',
  headers: {
    Accept: 'application/json',
    'X-CSRF-TOKEN': store().state.auth.user.csrf
  },
  credentials: 'same-origin'
})
const queue = new ApiSpawner({
          mode: 'debounce',
          time: 500,
          base: BaseHttpService
        })
        queue.spawn({
          url: `search`,
          query: { term: encodeURIComponent(q) }
        })

It just spawns request on every search field change

Also queue.spawn({url: ''}) - would be great if it was possible just call service url queue.spawn({SomeService('updateItem')) - maybe not this way, but u got idea :)

@SergeyMiracle
Copy link
Author

@Kelin2025 a little help here plz 😄

@Kelin2025
Copy link
Member

Kelin2025 commented Nov 5, 2018

I think this package should be rewritten from scratch but I haven't enough time for that, sorry.
I hope someday I'll do it
You can use my latest package wait-and-go and combine with classic debounce

import createWaiter from "wait-and-go"

const afterRequest = createWaiter('Request')

let current
const debouncedReq = payload => {
  if (current) { 
    clearTimeout(current) 
  }
  current = setTimeout(() => {
    afterRequest.do(() => Service.doRequest(payload)
  }, 1000)
}

// This one is called after each call 
afterRequest(result => {
  console.log(result)
})

Snippet for more accurate:

// Save this function anywhere
export const debounceReq = (Service, time) => {
  const afterRequest = createWaiter('Request')

  let current
  const debouncedReq = payload => {
    if (current) { 
      clearTimeout(current) 
    }
    current = setTimeout(() => {
      afterRequest.do(() => Service.doRequest(payload)
    }, 1000)
  }

  return {
    start: debouncedReq,
    onFinish: afterRequest
  }
}

// Usage
const search = debounceReq(Service.extend({ url: 'search' }), 1000)

search.start({ url: '?q=test' })
search.onFinish(console.log)

@SergeyMiracle
Copy link
Author

ok, leaving this issue open for the future

@Kelin2025 Kelin2025 added the help wanted Extra attention is needed label Nov 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants