如何在JavaScript Proxy数组排序后仅触发一次通知？

针对你遇到的Proxy监听数组排序时多次触发set陷阱的问题，提供两种可行方案：

方案一：直接拦截sort方法 #

通过get陷阱捕获数组的sort方法，包装后在排序完成时触发一次通知，精准针对排序操作：

const callback = function () {
  console.log(...arguments)
}
const array = [2,1]
const handler = {
  get(target, prop) {
    // 拦截sort方法
    if (prop === 'sort') {
      return function(...args) {
        // 执行原生排序逻辑
        const result = Array.prototype.sort.apply(this, args)
        // 触发排序完成通知
        callback("array sorted")
        return result
      }
    }
    return Reflect.get(target, prop)
  },
  // 保留原set逻辑（如果需要监听其他元素修改）
  set(target, prop, value, receiver) {
    return Reflect.set(target, prop, value, receiver)
  }
}
const proxy = new Proxy(array, handler)
proxy.sort()
// 输出："array sorted"

方案二：防抖合并多次set通知 #

利用防抖函数，将排序过程中同步触发的多次set事件合并为一次通知，适用于所有批量修改数组的场景：

// 简易防抖函数
const debounce = (fn, delay = 0) => {
  let timer
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

const callback = debounce(function() {
  console.log("array sorted")
})

const array = [2,1]
const handler = {
  set(target, prop, value, receiver) {
    const result = Reflect.set(target, prop, value, receiver)
    // 每次修改后触发防抖回调
    callback()
    return result
  }
}
const proxy = new Proxy(array, handler)
proxy.sort()
// 输出："array sorted"

方案对比 #

• 方案一：仅针对sort方法触发通知，不会干扰其他数组操作的监听逻辑，精准度高。
• 方案二：通用型强，可处理reverse、splice等所有批量修改操作，但会合并同一事件循环内的所有修改通知，需根据业务需求选择。

内容的提问来源于stack exchange，提问作者tit