web-dev-qa-db-ja.com

React（lodash.throttle）のイベントリスナーを削除しています

ねえstackoverflowers、

removeEventListener()は、lodashのthrottle()を使用しない場合に機能します。

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

（コンストラクターでメソッドをバインドしました）

残念ながら、throttle(this.checkVisible)関数がラップされていると機能しません。リスナーを削除しようとすると、throttle（）が新しいインスタンスを作成し、それをグローバルにバインドする必要があるためだと思います。どのように（もしそうなら）？

_  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;
_

ありがとう、善意の人々！

javascriptreactjseventsjavascript-events
13
Sebastian

Lodashスロットルはスロットル関数を作成するため、イベントリスナーを削除するには、その関数への参照を保存する必要があります。

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;
14
lagerone