javascript - Removing event listener in React (lodash.throttle) - Stack Overflow

admin管理员组

文章数量:1201648

removeEventListener() works when I don't use throttle() from lodash.

   window.addEventListener('scroll', this.checkVisible, 1000, false);
     window.removeEventListener('scroll', this.checkVisible, 1000, false);

(I bound the method in the constructor)

---

Unfortunately, with the throttle(this.checkVisible) function wrapped around it - doesn't work. I assume it's because when trying to remove the listener, throttle() makes new instance and maybe I should bind it globally. How though (if that's the case)?

  import React from 'react';
    import throttle from 'lodash.throttle';
    
    class About extends React.Component {
      constructor(props) {
        super(props);
    
        this.checkVisible = this.checkVisible.bind(this);
      }
    
      componentDidMount() {
        window.addEventListener('scroll', throttle(this.checkVisible, 1000), false);
    
      }
    
      checkVisible() {
       if (window.scrollY > 450) {
        // do something
        window.removeEventListener('scroll', throttle(this.checkVisible, 1000),
        false);
        }
      }
    
      render() {
        return (
          <section id="about"> something
          </section>
        );
      }
    }
    
    export default About;

removeEventListener() works when I don't use throttle() from lodash.

   window.addEventListener('scroll', this.checkVisible, 1000, false);
     window.removeEventListener('scroll', this.checkVisible, 1000, false);

(I bound the method in the constructor)

---

Unfortunately, with the throttle(this.checkVisible) function wrapped around it - doesn't work. I assume it's because when trying to remove the listener, throttle() makes new instance and maybe I should bind it globally. How though (if that's the case)?

  import React from 'react';
    import throttle from 'lodash.throttle';
    
    class About extends React.Component {
      constructor(props) {
        super(props);
    
        this.checkVisible = this.checkVisible.bind(this);
      }
    
      componentDidMount() {
        window.addEventListener('scroll', throttle(this.checkVisible, 1000), false);
    
      }
    
      checkVisible() {
       if (window.scrollY > 450) {
        // do something
        window.removeEventListener('scroll', throttle(this.checkVisible, 1000),
        false);
        }
      }
    
      render() {
        return (
          <section id="about"> something
          </section>
        );
      }
    }
    
    export default About;

• javascript
• reactjs
• events
• dom-events

Share Improve this question Follow edited Feb 14, 2021 at 15:11 Brian Tompsett - 汤莱恩 5,8837272 gold badges6161 silver badges133133 bronze badges asked Oct 29, 2017 at 16:22 SebastianSebastian 1,30511 gold badge1717 silver badges2727 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 25

Lodash trottle creates a throttled function so you need to store a reference to it in order to remove the eventlistener.

import React from 'react';
import throttle from 'lodash.throttle';

class About extends React.Component {
  constructor(props) {
    super(props);

    this.checkVisible = this.checkVisible.bind(this);
    // Store a reference to the throttled function
    this.trottledFunction = throttle(this.checkVisible, 1000);
  }

  componentDidMount() {
    // Use reference to function created by lodash throttle
    window.addEventListener('scroll', this.trottledFunction, false);

  }

  checkVisible() {
   if (window.scrollY > 450) {
    // do something
    window.removeEventListener('scroll', this.trottledFunction, false);
    }
  }

  render() {
    return (
      <section id="about"> something
      </section>
    );
  }
}

export default About;

本文标签： javascriptRemoving event listener in React (lodashthrottle)Stack Overflow