代码之家 › 专栏 › 技术社区 › Fussionweb

对具有不同持续时间的多个函数反应本机setInterval函数

react-native reactjs javascript

Fussionweb · 技术社区 · 6 年前

setInterval() 刷新开启功能 componentDidMount() 和 clearInterval() 在 componentWillUnmount() ,但我面临的麻烦,它只需要一个功能,它的持续时间最短。但如果设置两个函数的持续时间相同,则达到效果。

这是一个例子

...
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btLevel: 0,
      btState: null,
    };
  }
  componentDidMount() {
    this.getBtLevels();
    this.getBtState();
    this.batLS2();
    this.batLS10();
  }
  componentWillUnmount() {
    clearInterval(() => { this.batLSS(); this.batLS10(); });
  }
  getBtLevels = () => {
    fetch(apiUrl).then((res) =>
      this.setState({btLevel: res.level}),
    );
  };
   getBtLevelArcs = () => {
      fetch(apiUrl).then((res) =>
      this.setState({btLevelArc: res.level}),
    );
   };

  getBtState = () => {
     fetch(apiUrl).then((res) =>
      this.setState({BtState: res.state}),
    );
  };
  
   batLS10 = () => {
     setInterval(() => {
      this.getBtLevelArcs();
  
    }, 10000);
   };
  batLS2 = () => {
    setInterval(() => {
       this.getBtLevels();
       this.getBtState();
    }, 1000);
  };

...

上面的代码 this.getBtLevels(); this.getBtState(); this.getBtLevelArcs(); 每10秒取一次值。在这个 this.getBtLevels(); this.getBtLevelArcs(); 函数的值相同。但每1秒刷新一次,每10秒刷新一次。这是1秒功能 this.batLS2()

我怎样才能达到这个值呢?一个应该刷新值1,另一个值是10。

Expo

0 回复 | 直到 6 年前

Drew Reese 6 年前

发行

clearInterval 通过传递从 setInterval this.timerId = setInterval(... 和 clearInterval(this.timerId) .

解决方案

为每个间隔计时器添加一个计时器变量

constructor(props) {
  super(props);
  
  ...

  this.timer1 = null;
  this.timer2 = null;
}

componentWillUnmount() {
  clearInterval(this.timer1)
  clearInterval(this.timer2)
}

保存定时器参考

batLS10 = () => {
  this.timer2 = setInterval(() => {
    this.getBtLevelArcs();
  }, 10000);
};

batLS2 = () => {
  this.timer1 = setInterval(() => {
    this.getBtLevels();
    this.getBtState();
  }, 1000);
};

shubham 6 年前

getBtLevels 和 getBtState 每隔1秒呼叫一次 getBtLevelArcs 每隔10秒。但是当调用,他们的 setState

理想情况下,这不应该是一个问题,因为这三个函数都有不同的状态。 btLevel btLevelArc 和 btState . 更新一个状态不应影响另一个状态。但完全取决于你的逻辑。

获取级别 和 获取状态 第二个组件将包含与 getBtLevelArcs

代码如下:

class App extends React.Component {
    ...
    //some common handlers for SubApp1 and SubApp2
    ...

    render() {
        return (
            <React.Fragment>
                <SubApp1 />
                <SubApp2 />
            </React.Fragment>
        )
    }    





class SubApp1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            btLevel: 0,
            btState: null,
        };
    }

    componentDidMount() {
        this.getBtLevels();
        this.getBtState();
        this.batLS2();
    }

    componentWillUnmount() {
        clearInterval(() => { this.batLSS(); });
    }
    getBtLevels = () => {
        fetch(apiUrl).then((res) =>
            this.setState({ btLevel: res.level }),
        );
    };


    getBtState = () => {
        fetch(apiUrl).then((res) =>
            this.setState({ BtState: res.state }),
        );
    };

    batLS2 = () => {
        setInterval(() => {
            this.getBtLevels();
            this.getBtState();
        }, 1000);
    }
      ...
      ...


class SubApp2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            btLevelArc: 'some default value'
        };
    }
    componentDidMount() {
        this.batLS10();
    }
    componentWillUnmount() {
        clearInterval(() => { this.batLS10(); });
    }
    getBtLevels = () => {
        fetch(apiUrl).then((res) =>
            this.setState({ btLevel: res.level }),
        );
    };

    getBtState = () => {
        fetch(apiUrl).then((res) =>
            this.setState({ BtState: res.state }),
        );
    };


    getBtLevelArcs = () => {
        fetch(apiUrl).then((res) =>
            this.setState({ btLevelArc: res.level }),
        );
    };
     ...
     ...