[英]Javascript Alternate functions run onclick
So I have this speech to text typing feature that is triggered upon pressing a microphone icon. 因此,我具有语音输入文本功能,该功能是在按下麦克风图标时触发的。 The feature works.
该功能有效。 My problem is that I want the same icon to do 2 things.
我的问题是我希望同一图标执行2项操作。 1st click it will start hearing for voice.
第一次单击它将开始听到声音。 2nd click will stop hearing for voice.
第二次单击将停止听到声音。 I basically want the function
onclick
to alternate between 2 functions, Start and Stop. 我基本上希望功能
onclick
在两个功能之间交替,即开始和停止。 How do I do it? 我该怎么做?
Below is what I got currently. 以下是我目前得到的。 That only works to START the recording How do I fit
recognition.stop()
into the same click function? 那仅对开始录制有效。如何将
recognition.stop()
放入同一单击函数?
$('#micButton').on('click', function () {
recognition.start(); //this is to start recording
});
Below this is what I thought would work (it doesn't), to alternate between start and stop. 在此之下,我认为可以在开始和停止之间进行切换(不起作用)。
$('#micButton').on('click',
function () {
recognition.start();
},
function () {
recognition.stop();
}
);
To summarise, how do I get my onclick
to alternate between start and stop? 总而言之,如何让我的
onclick
在开始和停止之间切换?
You'll need a flag of some sort to check to see if voice is currently being listened for: 您将需要某种标记来检查当前是否正在收听语音:
let currentlyListening = false;
$('#micButton').on('click', function () {
if (!currentlyListening) {
recognition.start(); //this is to start recording
} else {
recognition.stop();
}
currentlyListening = !currentlyListening;
});
It'd probably be good to also provide an indicator to the user the current state as well, if recognition
doesn't already do that - eg, change or add an image that shows a red dot while currentlyListening
is true
. 如果
recognition
还没有做到,最好也向用户提供当前状态的指示符,例如,更改或添加在currentlyListening
为true
时显示红点的图像。
Could set a data tag or a class to determine if it's being used or not. 可以设置数据标签或类来确定是否正在使用它。
// SEEING AS YOU'RE USING JQUERY
$('#micButton').on('click', function () {
if($(this).data('active') == false) {
recognition.start();
$(this).data('active', true);
} else {
recognition.stop();
$(this).data('active', false);
}
}
Ternary operator can be used as well!) 也可以使用三元运算符!)
$('#micButton').on('click', function () {
recognition[ this.listening ? "stop" : "start" ]();
this.listening = !this.listening;
});
Nearly the same thing, as @CertainPerformance answer, but storing the true / false flag in the clicked element object. 与@CertainPerformance答案几乎相同,但是将true / false标志存储在单击的元素对象中。
First click: this.listening == undefined (false)
, → recognition.start(); 第一次单击:
this.listening == undefined (false)
,→ognition.start();
Second click: this.listening == true
, → recognition.stop(); 第二次单击:
this.listening == true
,→识别this.listening == true
();
And so on. 等等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.