功能组件：当SetTimeout失败时，为什么SetInterval成功？

编程问答 2022-08-15

问题描述

我最近决定重构代码以采用Hooks方法。

在我的一个Class组件中，我在一个函数中运行了该函数（以突出显示两个SVG）：

this.setState({left_svgs: true});

setTimeout(function() { //Start the timer

    this.setState({left_svgs: false});
    this.setState({right_svgs: true});
    
    setTimeout(function() { //Start the timer
        this.setState({right_svgs: false});
    }.bind(this),3000)
    
}.bind(this),3000)

这很好用，但是当我尝试用功能组件替换我的Class组件时，两个setTimeout()突然立即运行，没有任何延迟。

使用箭头功能无效，但是尝试使setInterval()运行一次即可：

setLeft_svgs(true);

var interval = setInterval(function() {
    setLeft_svgs(false);
    setRight_svgs(true);
    var interval2 = setInterval(function() { 
        setRight_svgs(false);
        clearInterval(interval2);
    },6000);
    clearInterval(interval);
},3000);

所以我愿意理解：类和功能组件运行setTimeout()的方式之间有区别吗？它与bind()有关系还是我不知道的？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjssetintervalsettimeout