javascript - 如何在react中使用settimeout方法？

Question

我想知道如何使用setTimeout()方法。基本上，我想在几秒钟后单击该元素，然后执行某些操作。

所以我的代码如下，

class SomeComponent extends React.PureComponent {
    on_first_render = () => {
        this.somemethod_called();
        setTimeout(() => {
            this.props.handle_click(52, 16);
        },0);
        setTimeout(() => {
            this.props.handle_click(522, 352);
         }, 0)

         setTimeout(() => {
             const input = document.querySelector('input[type=text] 
                           [name=somename]');
             input && input.blur();
         }, 700);

从上面的代码可以看出，在两个 setTimeout() 方法中调用了相同的 handle_click() 方法，7秒后我在文档中搜索输入元素并删除集中注意力。

我觉得这是笨拙且不正确的方法...有人可以让我知道如何以另一种方式做到这一点，而不是像这样重复。

谢谢。

Answer 1

事实上，您的 setTimeout 并没有等待任何事情；您正在排队三个超时，这三个超时将分别在 0、0 和 700 毫秒后解决。

虽然我不太确定你最终想要什么，或者如果你正在以非常惯用的 React 方式做事，我建议使用 async/ wait 和“延迟”辅助函数:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const onFirstRender = async () => {
  this.somemethod_called();
  await delay(100);
  this.props.handle_click(52, 16);
  await delay(100);
  this.props.handle_click(522, 352);
  await delay(700);
  const input = document.querySelector("input[type=text][name=somename]");
  if (input) {
    input.blur();
  }
};