setinterval 不会在我的 js 代码中停止，但它应该运行

Question

setinterval 不会在我的 js 代码中停止，即使我的条件语句在达到 14 时变为 false 并且应该执行 else

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>live site</title>
    <link rel="stylesheet" href="style.css">
    <style>
        @keyframes color {
            0% {
                background: #33CCCC;
            }
            20% {
                background: #33CC36;
            }
            40% {
                background: #B8CC33;
            }
            60% {
                background: #FCCA00;
            }
            80% {
                background: #33CC36;
            }
            100% {
                background: #33CCCC;
            }
        }
        
        body {
            background: #000000;
        }
        
        #list-var {
            background-color: #272727;
            max-width: 400px;
            padding: 5px 10px;
        }
        
        p {
            background-color: #161616;
            border-radius: 2px;
            margin: 5px 0;
            text-align: center;
            color: #005e5e;
            padding: 5px 0;
            font-family: fantasy;
        }
        
        .been {
            display: none;
        }
        
        .more {
            background-color: #000000;
            cursor: pointer;
            animation: color 9s infinite linear;
        }
    </style>
</head>

<body>
    <div id="boxing">


        <div id="list-var">
            <p>google</p>
            <p>google</p>
            <p>google</p>
            <p>google</p>
            <p>google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="been">google</p>
            <p class="more" onclick="more_list();">view more...</p>
        </div>
    </div>
</body>


<script>
    function more_list() {
        var been_tag = document.getElementsByClassName('been');
        var for_speed = setInterval(sett, 200);
        var i = 0;

        function sett() {
            console.log(i);
            been_tag[i].style.display = "block";

            if (been_tag.length >= i) {
                i++;
            } else {
                clearInterval(for_speed);
            }
        }
    }
</script>

</html>

和错误：

index.html:106 Uncaught TypeError: Cannot read properties of undefined (reading 'style') at sett (index.html:106:25)

我知道我有一个错误，但我尝试了很多，但我没有找到那个错误

Answer 1

问题是

if (been_tag.length >= i) {
    i++;
}

想象been_tag是空的。

if (0 >= 0) // true

那么你仍然会进行下一次迭代，

 been_tag[0].style.display = "block";

即使been_tag什么都没有。 您需要改为：

if (been_tag.length - 1 >= i) {
    been_tag[i].style.display = "block";
    i++
}

以便您仅在i实际存在的情况下访问该元素：

 function more_list() { var been_tag = document.getElementsByClassName('been'); var for_speed = setInterval(sett, 200); var i = 0; function sett() { if (been_tag.length - 1 >= i) { been_tag[i].style.display = "block"; i++ } else { clearInterval(for_speed); } } }

 @keyframes color { 0% { background: #33CCCC; } 20% { background: #33CC36; } 40% { background: #B8CC33; } 60% { background: #FCCA00; } 80% { background: #33CC36; } 100% { background: #33CCCC; } } body { background: #000000; } #list-var { background-color: #272727; max-width: 400px; padding: 5px 10px; } p { background-color: #161616; border-radius: 2px; margin: 5px 0; text-align: center; color: #005e5e; padding: 5px 0; font-family: fantasy; }.been { display: none; }.more { background-color: #000000; cursor: pointer; animation: color 9s infinite linear; }

 <body> <div id="boxing"> <div id="list-var"> <p>google</p> <p>google</p> <p>google</p> <p>google</p> <p>google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="been">google</p> <p class="more" onclick="more_list();">view more...</p> </div> </div> </body>

setinterval 不会在我的 js 代码中停止，但它应该运行

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-24 19:33:39

setinterval 不会在我的 js 代码中停止，但它应该运行

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-24 19:33:39

解决方案1
0 已采纳 2022-08-24 19:33:39