javascript - 为什么setInterval只执行一次？

Question

setInterval 仅执行一次。我还尝试使用 setTimeout 并将其放置在函数内以引起循环，但这给出了相同的结果。我正在使用括号，如果这有影响的话，它是实时预览。

const buttons = document.getElementsByTagName('button');

setInterval(charChange, 1000);

function charChange(){
    let string;
    let chars = ['#', '!', '@', '$', '%', '&', '+', '?'];
    for(i = 0; i < buttons.length; i++){
        string = buttons[i].textContent;
        let char = chars[Math.floor(Math.random() * 7)];
        string = string.replace(/_/, char);
        buttons[i].textContent = string;
    }
}

<button id = 'title'>help_</button>

Answer 1

您的函数运行正确，问题出在函数代码本身，而不是在 setInterval 中。

这样做:

string = string.replace(/_/, char);

您总是尝试替换 _ 字符。从第二次调用您的函数开始，该字符将不再存在，因为它被第一次调用替换。

如果您希望最后一个字符不断变化，您有多种选择:

string = string.substrstring.replace(/.$/, char);
// or
string = string.substrstring.slice(0, -1) + char;
// or even just
buttons[i].textContent = 'help' + char;

正则表达式 .$ 匹配字符串中最后位置的任何字符($ 匹配字符串的末尾)，但它可能是最慢的选项。

<小时/>

工作片段:

const buttons = document.getElementsByTagName('button');

setInterval(charChange, 1000);

function charChange(){
    let string;
    let chars = ['#', '!', '@', '$', '%', '&', '+', '?'];
    for(i = 0; i < buttons.length; i++){
        let char = chars[Math.floor(Math.random() * 7)];
        buttons[i].textContent = 'help' + char;
    }
}

<button id = 'title'>help_</button>