通过状态(或非全局)存储和清除Settimeout计时器

Question

我只是尝试在用户在图标上慕斯一秒钟后才打开弹出窗口，以防止偶然触发它。

我发现这样做的唯一方法是在处理程序函数上使用SettiMeout，问题是要使此操作，我必须向React组件声明一个全局变量。这有效，但我宁愿以这种方式使用全局变量。

let timer; 
export default class Users extends Component {
  state = {
      popoverOpen: false,
    };

  handleMouseOver = (e) => {
    e.stopPropagation();
    switch (e.type) {
      case 'mouseover':
        clearTimeout(timer);
        timer =
          setTimeout(() => {
            this.setState({
              popoverOpen: true
            });
          }, 1000);
        break;
      case 'mouseout':
        clearTimeout(timer);
        break;
      default:
        console.log(e.type);
        break;
    }
  };

是否有一种方法可以使用本地状态设置和清除超时，或者有更好的方法可以逃脱我？

谢谢。

Answer 1

使用上层类存储计时器和状态数据，看起来像：

class A {
  constructor() {
    this.state = false;
  }
  func() {
    if (this.state) {
      console.log('push the call');
      clearTimeout(this.timer);
    } else {
      console.log('initial call');
    }
    this.state = true;
    this.timer = setTimeout(() => {
      this.state = false;
      console.log('Call ended');
    }, 500);
  };
};
const a = new A();
a.func();
for (let i = 0; i < 5; i += 1) {
  setTimeout(() => a.func(), i * 200);
}

---

---

，或者如果您不想污染您的课程，请在IIFE内部包装功能，您可以存储数据

我已经创建了一个摘要示例，然后是一个可用的反应示例来放置您的代码(因为handleMouseOver = (e) => {在平原JS中不起作用(

class A {};
const a = new A();
a.func = (() => {
  let state = false;
  let timer;
  
  return () => {
      if (state) {
        console.log('push the call');
        clearTimeout(timer);
      } else {
        console.log('initial call');
      }
      state = true;
      timer = setTimeout(() => {
        state = false;
        console.log('Call ended');
      }, 500);
  };
})();
for (let i = 0; i < 5; i += 1) {
  setTimeout(() => a.func(), i * 200);
}

---

class A {
  func = (() => {
    let state = false;
    let timer;
    return () => {
      if (state) {
        console.log('push the call');
        clearTimeout(timer);
      } else {
        console.log('initial call');
      }
      state = true;
      timer = setTimeout(() => {
        state = false;
        console.log('Call ended');
      }, 500);
    };
  })();
};