注冊回調后實現注銷

Question

我編寫了一個簡單的軟件，允許用戶在設置 state 時“注冊”function。 這很容易通過向數組添加函數來實現。 我想返回一個能夠“取消注冊”特定 function 的 function。 請注意，用戶可能會注冊相同的 function 兩次。 這意味着“注銷” function 不能基於 function 作為 map 中的鍵

唯一想到的是讓“寄存器”function 變得更復雜，其中“回調”數組中的每個項目不僅僅是一個 function，而是一個 ZA8CFDE6331BD59EB2666F8911ZCB，例如：

{
  id: someId
  fn: [the function]
}

並且注銷 function 將過濾 someId 值。 但我就是不喜歡這樣。

想法？

const state = {}
const callbacks = []

const register = (fn) => {
  callbacks.push(fn)
  return () => {
    console.log('Unregister function. HELP!!! How do I do this?')
  }
}

const setState = async (key, value) => {
  state[key] = value
  for (const fn of callbacks) fn(key, value)
}

const getState = (key) => {
  return state[key]
}

const f1 = () => {
  console.log('f1')
}

const f2 = () => {
  console.log('f2')
}

const unregF1a = register(f1)
const unrefF1b = register(f1)
const unregF2 = register(f2)
setState('some', 'a')
unregF1a()
setState('some', 'b')

Answer 1

循環遍歷您的回調並刪除所需的 function （如果相同的 function 注冊了兩次，則有效）。 你可以做一個簡單的 for 循環：

function unregister(fn) {
  for (let i = callbacks.length - 1; i >= 0; i--) {
    if (callbacks[i] === fn) {
      callbacks.splice(i, 1)
    }
  }
}

或者您可以使用let並替換整個數組：

let callbacks = [];

function unregister(fn) {
  callbacks = callbacks.filter(cb => cb !== fn)
}

---

如果您希望能夠多次注冊同一個 function 並能夠獨立注銷它們，那么是的，您需要跟蹤某種 id。

id 可以很簡單，比如增加 integer，您可以將它們存儲在不同的數組中，在同一索引中 function 在回調數組中（這是散列）。

像這樣的東西：

const state = {}
const callbacks = []
const ids = []

let nextId = 0

const register = (fn) => {
  const id = nextId

  callbacks.push(fn)
  ids.push(nextId)
  nextId++

  return () => {
    // find the function position using the ids array:
    const fnIndex = ids.findIndex(cbId => cbId === id)

    if (fnIndex === -1) return // or throw something

    // Now remove the element from both arrays:
    callbacks.splice(fnIndex, 1)
    ids.splice(fnIndex, 1)
  }
}

這樣，注銷 function 總是查找 id/fn 所在的確切索引。