关于前端的闭包和事件解绑问题

2020-05-18 22:11:24 +08:00
 qaqLjj

add,remove 这两个闭包访问的 hide 函数为什么不是同一个函数呢,
正因为不是同一个函数,导致事件解绑失败了。
求高手指教


-------借助全局变量 addHide 保存调用 add 时访问的 hide ,代码如下-------

let addHide = null

function clickListener() {
  function hide() {
    console.log('hide exc')
  }

  function add() {
    addHide = hide
    document.addEventListener('click', hide, false)
  }

  function remove() {
    console.log(hide === addHide);
    document.removeEventListener('click', hide, false)
  }

  return {
    add,
    remove
  }
}

clickListener().add()
clickListener().remove()
697 次点击
所在节点    问与答
5 条回复
xxx749
2020-05-18 22:24:55 +08:00
你这代码跑了两次,所有 hide 函数也声明了两次,你把 clickListener 函数的返回值赋值给变量再试一次就相等了
xxx749
2020-05-18 22:25:56 +08:00
@xxx749 #1 所有 -> 所以
qaqLjj
2020-05-18 22:28:47 +08:00
@xxx749 你说的对,我发完问题也看出来了,执行一次就创建了一个新的闭包
rabbbit
2020-05-18 22:29:18 +08:00
const {add, remove} = clickListener()
add()
remove()
SoloCompany
2020-05-18 23:17:48 +08:00
这种问题很常见也是无解的

如果闭包不保证单例, 一般的解决方案是增加名称空间
add: $(document).on('click.moduleHash', hide)
remove: $(document).off('click.moduleHash')

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/673029

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX