setInterval 与setTimeout的相关用法

Question

问题描述

进入一个H5页面底部悬浮入口(类似于一个半通明的弹框固定在视窗底部)持续显示半分钟后，自动隐藏，隐藏半分钟后再持续显示半分钟，如此循环。利用setInterval与setTimeout怎么解决

问题出现的环境背景及自己尝试过哪些方法

以下是自己尝试的代码

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

//第一种写法
//先等待60秒后执行函数
setInterval(closeFun,60000);
//setTimeout先等待30秒后执行隐藏，然后又调用setTimeout等待30秒后显示
function closeFun(){
    setTimeout(function(){
        $("#guide").fadeOut();
        setTimeout(function(){
            $("#guide").fadeIn();
        },30000);
    },30000);
}


 //第二种写法
//先等待60秒后执行函数
setInterval(closeFun,60000);
function closeFun(){
    setTimeout(function(){
        $("#guide").fadeOut();            
    },30000);
    setTimeout(function(){
        $("#guide").fadeIn();
    },30000);
}

你期待的结果是什么？实际看到的错误信息又是什么？

问题描述

第一种定时器过了不止一分半分钟才开始第一次的隐藏，后续的显示隐藏时间相继变长了
第二种后续显示隐藏的时间变得比预计时间很快
考虑过同步异步，使用5秒钟测验时没问题，使用30秒却不是预计的那样

问题出现的平台版本及自己尝试过哪些方法

Answer 1

setInterval(()=>{

$("#guide").toggle();

},30000)

Answer 2

不需要setTimeout。

flag = 'in';
setInterval(closeFun,30000);
//setTimeout先等待30秒后执行隐藏
function closeFun(){
    if(flag == 'in'){
        $("#guide").fadeOut();
        flag = 'out';
    }else{
        $("#guide").fadeIn();
        flag = 'in';
    }
}