0

如何使节流函数可重用？

创建了一个节流函数，希望在应用程序的不同位置重用。油门功能应该imported进入不同的文件位置！

Bellow，您可以找到一个工作版本，其中成功使用了节流功能（用户可以单击 cta 并稍后触发回调）。

标记，

  <button id="cta1">cta 1</button>
  <button id="cta2">cta 2</button>

脚本示例，

function throttle (fn, delay) {
  let timer = null
  return (args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn(args)
    }, delay)
  }
}

const foobar1 = throttle(({p1, p2}) => {
  alert(`${p1} ${p2}`)
}, 800)

const foobar2 = throttle(({p1, p2}) => {
  alert(`${p1} ${p2}`)
}, 800)

const btn1 = document.querySelector('#cta1')
const btn2 = document.querySelector('#cta2')

btn1.addEventListener('click', () => {
  foobar1({
    p1: 'hello',
    p2: 'world'
  })
})

btn2.addEventListener('click', () => {
  foobar2({
    p1: 'yo',
    p2: 'cool!'
  })
})

同时，如果我们声明一个受限制的函数并尝试在多个地方导入它，它将仅适用于单个案例，但不能同时工作。

为了，

export const throttled = throttle(foobar, delay)

我想常见的答案是创建一个新实例，将其导入到，如下例所示，它可以正常工作：

export const Throttled = function (args) {
  return throttle(foobar, delay)
}

const throttled = Throttled()

但是，还有哪些其他选择？

4

0 回答 0