我需要播放一些文本然后才执行以下操作（例如隐藏“暂停”和“停止”按钮），但是当我开始播放文本时它们会立即隐藏。简化情况 - 请参阅代码。非常感谢您的建议..<!DOCTYPE html><html><body><script src='https://code.responsivevoice.org/responsivevoice.js'></script><script>function Voice(id){ var element = document.getElementById(id); var text = element.innerText; responsiveVoice.speak(text, "UK English Male", {onend: Hide("div1")});}function Hide(id){ var element = document.getElementById(id); element.style="visibility: hidden";}</script><div id="div1">This is the first line.</div><div id="div2" onclick = 'Voice("div2")'>This is the second line.</div><br>Click on the second line to play its text. The first line should be hidden after the message is played.<br>But it is hidden IMMEDIATELY after clicking. What is wrong? </body></html>解决方案是使用 arrow: {onend: () => Hide()} 而不是 {onend: Hide()} onstart:、onend: 和 rate: 甚至可以同时使用。只有一个小问题——更改页面内容后，第一次使用 ResponsiveVoice 功能时会有很长的延迟。见代码：
1 回答
侃侃无极
TA贡献2051条经验 获得超10个赞
您需要传递一个调用, Hide而不是Hide立即调用的函数：
{onend: Hide("div1")}hide评估该行后立即调用。它需要是：
{onend: () => Hide("div1")}<!DOCTYPE html>
<html>
<body>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script>
function Voice(id){
var element = document.getElementById(id);
var text = element.innerText;
responsiveVoice.speak(text, "UK English Male", {onend: () => Hide("div1")});
}
function Hide(id){
var element = document.getElementById(id);
element.style="visibility: hidden";
}
</script>
<div id="div1">This is the first line.</div>
<div id="div2" onclick = 'Voice("div2")'>
This is the second line.
</div>
<br>
Click on the second line to play its text. The first line should be hidden after the message is played.<br>
But it is hidden IMMEDIATELY after clicking. What is wrong?
</body>
</html>
添加回答
举报
0/150
提交
取消