Блог

Я пытаюсь выполнить функцию только через 5 секунд, но она выполняется сразу после рендеринга

Ниже приведен мой код

 class App extends React.Component {
  onInactive = (ms, cb) => {
    var wait = setTimeout(cb, ms);

    document.onmousemove = document.mousedown = document.mouseup = document.onkeydown = document.onkeyup = document.focus = function () {
      clearTimeout(wait);
      wait = setTimeout(cb, ms);
    };
  };

  render() {
    this.onInactive(5000, alert("Inactive for 5 seconds"));
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

export default App;
 

Это моя ссылка на codesandbox

В вашем коде второй параметр не является функцией, это оператор, но функция setTimeout ожидает, что первый параметр является функцией обратного вызова. Пожалуйста, проверьте приведенный ниже рабочий код для этого.

 import React from "react";

/**
 * Add any other events listeners here
 */
// const events = ["mousemove", "click", "keypress"];

class App extends React.Component {
  onInactive = (ms, cb) => {
    var wait = setTimeout(cb, ms);

    document.onmousemove = document.mousedown = document.mouseup = document.onkeydown = document.onkeyup = document.focus = function () {
      clearTimeout(wait);
      wait = setTimeout(cb, ms);
    };
  };

  render() {
    this.onInactive(5000, () => alert("Inactive for 5 seconds"));
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

export default App;