Javascript setInterval在setTimeout内不工作。。。为什么？

我正在尝试根据数组上预先设置的一系列值更改元素的不透明度。该操作应在用户单击按钮并系统等待一秒钟后开始

以下是我得到的：

<script>
$(function() {
$("#Listening").click(function() {

    setTimeout(triggerListening, 1000);
    function triggerListening()
    {
        document.getElementById("listening").className = "listeningIn";
    }

    setTimeout(triggerUserTalking, 2000);
    function triggerUserTalking()
    {

        var audioSim = [3, 2, 7, 15, 15, 16, 15, 7, 7, 3, 8, 8, 17, 17, 20, 20, 21, 21, 17, 17, 13, 13, 12, 12, 13, 13, 16, 16, 18, 18, 17, 17, 16, 16, 14, 10, 11, 11, 15, 15, 16, 16, 15, 15, 14, 14, 13, 13, 13, 13, 15, 15, 23, 44, 55, 55, 56, 55, 44, 44, 33, 29, 31, 31, 42, 50, 60, 63, 60, 54, 39, 39, 30, 28, 30, 30, 33, 33, 36, 39, 38, 38, 33, 16, 6, 6, 5, 7, 18, 18, 28, 31, 28, 28, 26, 26, 23, 22, 23, 23, 25, 28, 28, 28, 27, 27, 28, 28, 28, 28, 28, 28, 27, 27, 28, 28, 35, 35, 43, 43, 49, 54, 56, 55, 43, 36, 26, 28, 31, 52, 65, 70, 68, 68, 51, 45, 41, 41, 38, 40, 49, 49, 57, 58, 58, 31, 42, 42, 46, 51, 55, 55, 54, 42, 33, 31, 37, 37, 45, 46, 42, 42, 37, 38, 38, 41, 41, 44, 44, 46, 48, 47, 47, 43, 44, 44, 47, 47, 49, 49, 48, 45, 44, 44, 44, 44, 45, 45, 44, 44, 43, 39, 36, 34, 35, 59, 59, 85, 93, 98, 98, 100, 95, 67, 67, 43, 36, 34, 34, 39, 51, 62, 62, 68, 76, 75, 75, 50, 36, 27, 20, 18, 36, 57, 57, 52, 48, 43, 44, 49, 50, 50, 49];

        var i = 0;

        window.setInterval('step()', 20)

        function step() {
            var element = document.getElementById("listening");
            element.style.opacity = "0." + audioSim[i];
            i++;
            if (i == audioSim.length) i = triggerStopTalking;
        }

        function triggerStopTalking()
        {
            document.getElementById("listening").className = "listeningOut";
        }

    }                   

});
});
</script>

$（函数（）{
$（“#侦听”）。单击（函数（）{
设置超时（triggerListening，1000）；
函数triggerListening（）
{
document.getElementById（“侦听”）.className=“ListingIn”；
}
setTimeout（triggerUserTalking，2000年）；
函数triggerUserTalking（）
{
var audioSim=[3, 2, 7, 15, 15, 16, 15, 7, 7, 3, 8, 8, 17, 17, 20, 20, 21, 21, 17, 17, 13, 13, 12, 12, 13, 13, 16, 16, 18, 18, 17, 17, 16, 16, 14, 10, 11, 11, 15, 15, 16, 16, 15, 15, 14, 14, 13, 13, 13, 13, 15, 15, 23, 44, 55, 55, 56, 55, 44, 44, 33, 29, 31, 31, 42, 50, 60, 63, 60, 54, 39, 39, 30, 28, 30, 30, 33, 33, 36, 39, 38, 38, 33, 16, 6, 6, 5, 7, 18, 18, 28, 31, 28, 28, 26, 26, 23, 22, 23, 23, 25, 28, 28, 28, 27, 27, 28, 28, 28, 28, 28, 28, 27, 27, 28, 28, 35, 35, 43, 43, 49, 54, 56, 55, 43, 36, 26, 28, 31, 52, 65, 70, 68, 68, 51, 45, 41, 41, 38, 40, 49, 49, 57, 58, 58, 31, 42, 42, 46, 51, 55, 55, 54, 42, 33, 31, 37, 37, 45, 46, 42, 42, 37, 38, 38, 41, 41, 44, 44, 46, 48, 47, 47, 43, 44, 44, 47, 47, 49, 49, 48, 45, 44, 44, 44, 44, 45, 45, 44, 44, 43, 39, 36, 34, 35, 59, 59, 85, 93, 98, 98, 100, 95, 67, 67, 43, 36, 34, 34, 39, 51, 62, 62, 68, 76, 75, 75, 50, 36, 27, 20, 18, 36, 57, 57, 52, 48, 43, 44, 49, 50, 50, 49];
var i=0；
setInterval（'step（）'，20）
函数步骤（）{
var元素=document.getElementById（“侦听”）；
element.style.opacity=“0.”+audioSim[i]；
i++；
如果（i==audioSim.length）i=triggerStopTalking；
}
函数triggerStopTalking（）
{
document.getElementById（“侦听”）.className=“listeningOut”；
}
}                   
});
});

这很好，除了改变不透明度部分

用户点击监听，1秒后，通过切换“listeningIn”类，监听对象出现在屏幕上…再过一秒，该元素应根据“audioSim”中的值更改不透明度一段时间…但它不会

---

我已经在一个单独的html文件中测试了setInterval代码，它工作得很好…所以我想我不能在setTimeout函数中使用setInterval？帮助？

您正在将字符串传递给

setinvval

不要那样做

setInterval

是在全局范围内对字符串进行求值；

step（）

是一个局部变量。因此，它找不到任何内容

相反，您需要传递函数本身：

setInterval(step);

而不是

window.setInterval('step()', 20);

试一试

我相信文本版本将在全球范围内进行评估，其中

步骤可能不存在。
行中：

> window.setInterval('step()', 20)

setInterval在全局上下文中执行，但
步骤
在另一个
窗口
无法访问的上下文中声明。将其更改为：

setInterval(step, 20)

这样您就可以传递对函数的引用

setInterval(step, 20)