此功能的目的是在第一个按钮上单击一秒后显示第二个按钮。点击同一个按钮后，它会消失。 但是会发生的是，在第二次单击后，第二个按钮消失并稍后返回，这在函数中不是必需的。 我完全检查了它看起来没问题。但它没有按预期工作。
function botao_home() {
document.getElementById('mobile_index').style.display = 'block';
}
var onof1 = '0';
function showhide() {
if (onof1 == '0') {
setInterval(botao_home, 1000);
onof1 = '1';
} else {
document.getElementById('mobile_index').style.display = 'none';
onof1 = '0';
/*Note that second click should only set the display property of id "mobile_index" to "none".
But it is making the second button return, and this was not requested.*/
}
}#mobile_index {
display: none
}
a {
display: block;
margin: 30px;
padding: 40px;
background: seagreen;
color: palegreen;
font-family: verdana, helvetica, arial, tahoma;
}<div>
<a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
<a id="mobile_index">Página Inicial</a>
</div>
答案 0 :(得分：0)
您可以将间隔保存在var中并清除它。
var interval;
function showhide() {
if (onof1=='0')
{
interval = setInterval(botao_home, 1000);
onof1='1';
}
else
{
clearInterval(interval);
document.getElementById('mobile_index').style.display = 'none';
onof1='0';
/*Note that second click should only set the display property of id "mobile_index" to "none".
But it is making the second button return, and this was not requested.*/
}
}
答案 1 :(得分：0)
使用setTimeout，而不是setInterval。 setInterval用于定期执行某项操作，setTimeout只需在延迟后执行一次。
function botao_home() {
document.getElementById('mobile_index').style.display = 'block';
}
var onof1 = false;
function showhide() {
if (!onof1) {
setTimeout(botao_home, 1000);
onof1 = true;
} else {
document.getElementById('mobile_index').style.display = 'none';
onof1 = false;
}
}#mobile_index {
display: none
}
a {
display: block;
margin: 30px;
padding: 40px;
background: seagreen;
color: palegreen;
font-family: verdana, helvetica, arial, tahoma;
}<div>
<a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
<a id="mobile_index">Página Inicial</a>
</div>
答案 2 :(得分：0)
在一秒计时器之前再次按下按钮时，你没有说出你想要发生什么。写入的方式是，在显示第二个链接之前，每次单击都会重置计时器。
我没有直接设置属性，而是在切换类。
单击链接时会检查计时器，如果设置则取消它并设置新计时器。如果显示链接，则切换类。当我添加类而不是单击发生时，我设置显示的变量。这样多次点击不会使mobileIndexShown处于无效状态。
当然，在你真正考虑将它包装在自己的容器中之前，你不必在全局名称空间中留下你的计时器并显示标志。
var mobileIndexShown = false;
var timerSet;
function showhide() {
if (timerSet) {
clearTimeout(timerSet);
}
if (!mobileIndexShown) {
timerSet = setTimeout(toggleMobileIndex, 1000);
} else {
toggleMobileIndex();
}
}
function toggleMobileIndex()
{
var mobileIndex = document.getElementById('mobile_index');
timerSet = false;
if (mobileIndex.className === 'DisplayBlock') {
mobileIndex.className = 'DisplayNone';
mobileIndexShown = false;
} else {
mobileIndex.className = 'DisplayBlock';
mobileIndexShown = true;
}
}
.DisplayBlock {
display: block;
}
.DisplayNone {
display: none
}
a {
display: block;
margin: 30px;
padding: 40px;
background: seagreen;
color: palegreen;
font-family: verdana, helvetica, arial, tahoma;
}
<div>
<a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
<a id="mobile_index" class="DisplayNone">Página Inicial</a>
</div>
答案 3 :(得分：0)
此答案使用CSS visibility代替display，其中包含一些可能需要be addressed的布局注意事项。
每次点击第一个toggle 按钮时，.show类为<a>。如果该元素已存在于该元素上，则该元素将被删除，如果该元素不存在，则会将其添加。
添加.show后，会启动a 1 second delay的CSS动画。延迟1秒后，播放动画（没有duration），最后将visibility设置为visible。 animation-fill-mode: forwards捕获visibility的状态并将其保留在元素上。
删除.show后，visibility会返回hidden的CSS 默认。
function showhide() {
document.getElementById( 'mobile_index' ).classList.toggle( 'show' );
}#mobile_index{
visibility: hidden;
}
#mobile_index.show {
animation-name: delayed_show;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes delayed_show {
0% { visibility: hidden; }
100% { visibility: visible; }
}
a {
display: block;
user-select: none;
margin: 30px;
padding: 40px;
background: seagreen;
color: palegreen;
font-family: verdana, helvetica, arial, tahoma;
}<div>
<a style="cursor:pointer" onclick="showhide()">Show/Hide</a>
<a id="mobile_index">Página Inicial</a>
</div>