JavaScript中setTimeout()和setInterval()的执行

eecspan

已于 2022-03-13 00:58:05 修改

阅读量206

点赞数 1

文章标签： javascript 前端 css3

于 2020-05-06 15:45:11 首次发布

本文链接：https://blog.csdn.net/qq_43219379/article/details/105951878

版权

百度前端技术学院-零基础学院学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述：

在做百度前端技术学院的一个问题时，需要使用js实现一个div盒子的淡入淡出效果，这里可以使用setInterval函数没隔一段时间将div的opacity从0递增到1或者从1递增到0。第二个效果是在进行淡入或者淡出时，按钮不能被点击，可以通过设置按钮的disabled属性来实现。

遇到问题：

在对opacity进行增加或者减少时，刚开始写的是div.style.opacity += 0.05;后来发现无法实现opacity的增加和减少，原因是opacity的数据类型是string，所以这样增加一个Number是不对的。我们可以设一个num，让num递增和递减，并每次都使用改变的num为opacity赋值，实现相同的效果（为opacity赋值时可以使用Number类型而不是String类型，好像是这样）。
在进行第二个效果时，刚开始是在setInterval函数之前和之后分别使用button.disabled = true; button.disabled = false;，实际运行发现无法得到应有效果，原来是在setInterval()之后，后面的语句会直接执行，不能等着setInterval()执行结束再执行，setTimeout()也是如此。这个问题之前是知道的，当时忘了。所以我们只需要在setInterval()函数内部停止函数时将按钮恢复。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>            
    <div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
    <button id="fade-btn">淡出</button>

    <script>
    let fadeObj = document.querySelector("#fade-obj");
    let fadeBtn = document.querySelector("#fade-btn");

    function fadeProcess(mode) {
        let btn = document.querySelector("#fade-btn");
        fadeBtn.disabled = true;
        //淡入
        if (mode == 0) {    
            let num = 0;
            fadeId = setInterval(() => {
                num += 5;
                fadeObj.style.opacity = num/100;
                if (fadeObj.style.opacity == 1) {
                    clearInterval(fadeId);
                    fadeBtn.disabled = false;
                    fadeBtn.innerHTML = "淡出";
                }
            }, 50);
        }
        //淡出
        else {
            let num = 100;
            fadeId = setInterval(() => {
                num -= 5;
                fadeObj.style.opacity = num/100;
                if (fadeObj.style.opacity == 0) {
                    clearInterval(fadeId);
                    fadeBtn.disabled = false;
                    fadeBtn.innerHTML = "淡入";
                }
            }, 50);
        }
    }
    fadeBtn.onclick = function() {
        if (this.innerHTML == "淡出") {
            fadeProcess(1);
        }
        else {
            fadeProcess(0);
        }
    }
    </script>
</body>
</html>

eecspan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中setTimeout()和setInterval()的执行

问题描述：在做百度前端技术学院的一个问题时，需要使用js实现一个div盒子的淡入淡出效果，这里可以使用setInterval函数没隔一段时间将div的opacity从0递增到1或者从1递增到0。第二个效果是在进行淡入或者淡出时，按钮不能被点击，可以通过设置按钮的disabled属性来实现。
复制链接

扫一扫

专栏目录