MarkLazy
V2EX  ›  问与答

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

  •  
  •   MarkLazy · May 18, 2020 · 1151 views
    This topic created in 2188 days ago, the information mentioned may be changed or developed.

    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()
    
    xxx749
        1
    xxx749  
       May 18, 2020
    你这代码跑了两次,所有 hide 函数也声明了两次,你把 clickListener 函数的返回值赋值给变量再试一次就相等了
    xxx749
        2
    xxx749  
       May 18, 2020
    @xxx749 #1 所有 -> 所以
    MarkLazy
        3
    MarkLazy  
    OP
       May 18, 2020
    @xxx749 你说的对,我发完问题也看出来了,执行一次就创建了一个新的闭包
    rabbbit
        4
    rabbbit  
       May 18, 2020
    const {add, remove} = clickListener()
    add()
    remove()
    SoloCompany
        5
    SoloCompany  
       May 18, 2020
    这种问题很常见也是无解的

    如果闭包不保证单例, 一般的解决方案是增加名称空间
    add: $(document).on('click.moduleHash', hide)
    remove: $(document).off('click.moduleHash')
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3078 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 13:54 · PVG 21:54 · LAX 06:54 · JFK 09:54
    ♥ Do have faith in what you're doing.