Resolved: calling function in difference ways

Question:

what is difference between

//debounce.ts
function debounce(func: Function, timeout = 3000) {
  let timer: any

  return () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(func)
    }, timeout)
  }
}

function callDebounce(apiCallFunc: Function) {
  const yui = debounce(() => {
    apiCallFunc()
  })

  return yui()
}

export default callDebounce

and

//debounce.ts
import apiCallFunc from "./controller"

function debounce(func: Function, timeout = 3000) {
  let timer: any

  return () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(func)
    }, timeout)
  }
}

export default debounce(() => {
  apiCallFunc()
})

if I import this file and call it three times tandemly, in the first one func will be called tree times after 3sec, and at second one it will be called just once after 3sec. but I dont know why!
actually I want a function to which I can pass many different callbacks, and it will run only the last one,but i dont want to get my apiCallFunk with importing it like the second one. i want my apiCallFunk as argument. because of this I have to use first one.
the use:

//controller.ts
import debounce from "./debounce.ts"

export apiCallFunc(){
//some comde here
}

onSearch(){
 debounce(apicallFunc())
}

Answer:

The code with your first snippet is calling debounce three times, creating three different yui functions that are debounced individually (each of them being a closure with its own let timer), and then calls each of them once.
The code with your second snippet is calling debounce once, then calls that debounced function three times, causing the timer mechanism to prevent two of the logs.

Actually I want a function to which I can pass many different callbacks, and it will run only the last one, because of this I have to use first one.

No, you need the second approach where debouce is only called once and a single timer is created. What you really want is a debounce function that passes through arguments:

function debounce(func: Function, timeout = 3000) {
  let timer: number | undefined;
  return function(...args) => {
//                ^^^^^^^
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
//                     ^^^^
    }, timeout)
  }
}

export default debounce(argFunc => {
//                      ^^^^^^^
  argFunc()
})

However, you should not export that debounce() call, it creates a module-level state and it will be impossible to create multiple different debounced functions with separate state or timeout lenghts (e.g. for multiple instances of the component). Calling debouce immediately and exporting the result is the same as writing a module

let timer: number | undefined;

export default function(argFunc) => {
  if (timer) clearTimeout(timer)
  timer = setTimeout(argFunc, 3000)
}

Don’t do that. Instead, export the debounce function itself, and then call it in your component where onSearch is needed:

// debounce.ts
export default function debounce(func: Function, timeout = 3000) {
  let timer: number | undefined;
  return function(...args) => {
//                ^^^^^^^
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
//                     ^^^^
    }, timeout)
  }
}

// controller.ts
import debounce from "./debounce.ts"

function apiCallFunc(){
  …
}

onSearch = debounce(apicallFunc);
//       ^^^^^^^^^^^^^^^^^^^^^^^

If you have better answer, please add a comment about this, thank you!

Resolved: calling function in difference ways

Resolved: Use Svelte Component as Slot

Resolved: Vaadin 14.9 – Redirect on Session Destroy Event

Resolved: How to separate multiple answers in one column, for multiple columns, by creating extra columns

Leave A Reply