如何在课内使用IntersectionObserver？

发布于 2025-01-21 20:11:11 字数 571 浏览 6 评论 0原文

在类中使用InterSectionObserver遇到问题。例如，我是从类构造仪观察者实例创建的，并在当前类中创建回调函数。当函数执行“此”不指向我的类实例时，它指向观察者实例。我尝试使用箭头功能和其他方式，但没有任何结果。有什么想法吗？

class SomeClass {
  constructor(className) {
    this.className = className;
    this.element = document.getElementByID(this.className);
    this.observer = new IntersectionObserver(this.someFunc, {threshold: 0.5});
    this.observer.observe(this.element);
  }

  someFunc(entry) {
    entry.forEach((change) => {
      console.log(this.className);
    });
  }
}

someInstance = new SomeClass("some-class__element");

原文

Encountered a problem with using IntersectionObserver inside a class. For example, I am creating from my class constructor observer instance and create a callback - function in the current class. When the function executes "this" not points to my class instance, it points to Observer instance. I tried to use arrow functions and other ways, but didn't any results. Any ideas?

class SomeClass {
  constructor(className) {
    this.className = className;
    this.element = document.getElementByID(this.className);
    this.observer = new IntersectionObserver(this.someFunc, {threshold: 0.5});
    this.observer.observe(this.element);
  }

  someFunc(entry) {
    entry.forEach((change) => {
      console.log(this.className);
    });
  }
}

someInstance = new SomeClass("some-class__element");

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别在捏我脸啦 2025-01-28 20:11:11

我找不到更好的解决方案（或正确的方法），但是我做了下一件事。由于IntersectionObserver是异步的，因此我无法通过“此”访问我的班级访问。因此，我只是通过InterSectionObserverentry创建了我类的观察者回调函数实例。在父元素内部，我最初将其放置在我的“某个类别__Element”脚本附近，其中创建了此类实例。我可以实例并将其用于我的目的。

someFunc(entry) {
  entry.forEach((change) => {
    var classInstance = change.target.parentElement.lastElementChild.innerText.split(" ", 1)[0];
    var self = window[classInstance];
    console.log(self.className);
  });
}

ps，如果不是PHP自动生成的类实例变量，则会更容易

<div class="some-class">
  <p id="some-class__element">0</p>
  <script>Vdfa5c592c147398f80e37058331ae17e = new SomeClass("some-class__element");</script>
</div>

I didn't find a better solution (or right way), but I made next thing. Because IntersectionObserver is asynchronous, then I can't get by "this" access to my class. So, I just create an observer callback function instance of my class by IntersectionObserverEntry. Inside parent element, I initially putted near my "some-class__element" Script where create instances of this class. I get to instance and use this for my purposes.

someFunc(entry) {
  entry.forEach((change) => {
    var classInstance = change.target.parentElement.lastElementChild.innerText.split(" ", 1)[0];
    var self = window[classInstance];
    console.log(self.className);
  });
}

P.S. It would be easier if the class instance variable was not automatically generated by PHP

<div class="some-class">
  <p id="some-class__element">0</p>
  <script>Vdfa5c592c147398f80e37058331ae17e = new SomeClass("some-class__element");</script>
</div>

回复收藏 0 原文

~没有更多了~