如何仅使用 javascript 计时和切换 onclick 事件答案

【问题标题】：how to time and toggle onclick events using only javascript如何仅使用 javascript 计时和切换 onclick 事件
【发布时间】：2013-09-30 15:55:43
【问题描述】：

我遇到了 javascript 的小问题（再次）。说我有一些文字，我希望它在一定的时间延迟（0.5秒）后出现，然后再次点击它应该立即消失（没有时间延迟）

所以我希望代码切换具有时差的文本类

<html>
<head>
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script>
function myfunc(){
the code here , 
}
</script>
</head>
<body>
<span id="text" class="hide" onclick="myfunc()">lorem ipsum dolor sit amet consecteteur</span>
</body>

我可以计算出剩下的 css 和 html 我只需要 javascript 代码

【问题讨论】：

标签： javascript html class toggle toggleclass

【解决方案1】：

你要求的东西对 javascript 来说是非常基本的。

这里有一些文档供您阅读和学习

timers
className（如何设置元素的类名）
getElementById
onclick event handler（保留它unobtrusive - 尽可能避免使用内联事件处理程序）

示例 | JSFiddle

我编写了一个简单的示例供您实验和学习

Javascript

//Get the references to the elements we're working on
var my_text = document.getElementById("text"),
    my_toggler = document.getElementById("toggler");

//Set timeout delay to 500 milliseconds
var delay = 500;

//Declare timer callback function
function click_callback(){
    my_text.className = "show";
}

//Have a global variable to reset the timer
var my_timer;

//Declare the onclick event handler
function text_onclick(e){
    /*
        Clear the timer so we don't create more timers
        that will trigger the callback several times
    */
    if(my_timer) clearTimeout(my_timer);

    if(my_text.className === "hide")
        my_timer = setTimeout(click_callback, delay);
    else
        my_text.className = "hide";
}

//Add the event handler to the toggler element
my_toggler.onclick = text_onclick;

HTML

<div id="container">
    <div id="text" class="hide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
        Etiam feugiat venenatis nulla vitae egestas.
    </div>
</div>
<div id="toggler">Toggle</div>

CSS

.show{ }

.hide{
    opacity: 0; /* Using opacity to "fill" the container */
    /* display: none; Also works, but acts differently.*/
}

#container{
    border: 1px solid lightgray;
    padding: 3px 5px;
    margin-bottom: 5px;
    display: inline-block;
}

#toggler{
    text-align: center;
    border: 1px solid lightblue;
    display: block;
    padding: 5px;
    cursor: default;
    width: 50px;

    /* Make non-selectable*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#toggler:hover{
    background-color: #4488DD;
    border-color: lightgray;
    color: white;
}

#toggler:active{
    background-color: #66AAFF;
}

【讨论】：

谢谢你的详细解释，但在你的小提琴中，文本消失了，但又没有出现，如果你可以让这个函数发生在一个 div 上，它会改变文本的类
迟早你将不得不自己做这件事！我会根据您的要求更新我的答案；）

【解决方案2】：

function myfunc()
{
    document.getElementById("text").style.visibility = 'hidden';
}

【讨论】：

【解决方案3】：

你应该使用这样的东西：

setTimeout(function() {
    // Do something after 0.5 seconds
    // Here you should display your text and bind the click event 
}, 500);

【讨论】：