Javascript 我的设置超时似乎不是每次都被触发'；这叫什么_Javascript_Html_Css_Settimeout

Javascript 我的设置超时似乎不是每次都被触发'；这叫什么

javascript html css

Javascript 我的设置超时似乎不是每次都被触发'；这叫什么,javascript,html,css,settimeout,Javascript,Html,Css,Settimeout,我有一个基本的页面，你可以点击几个按钮显示一个弹出窗口。在这个弹出窗口中，您有不同的按钮，onClick事件生成一个div slideUp并显示一些新内容我的问题来自这样一个事实：当您单击不同的按钮时，一个类将从中删除并添加到当前的。但是，由于删除这个类并将其放回是一个快速操作，我的css转换属性没有时间注意到修改（我猜），因此不会播放动画我解决这个问题的想法是在移除类之后放置一个sleep函数，以便css有时间生效，然后将它放回另一个div。但是它并不总是有效的，它会被不一致地触发我不能

我有一个基本的页面，你可以点击几个按钮显示一个弹出窗口。在这个弹出窗口中，您有不同的按钮，onClick事件生成一个div slideUp并显示一些新内容

我的问题来自这样一个事实：当您单击不同的按钮时，一个类将从中删除并添加到当前的。但是，由于删除这个类并将其放回是一个快速操作，我的css转换属性没有时间注意到修改（我猜），因此不会播放动画

我解决这个问题的想法是在移除类之后放置一个sleep函数，以便css有时间生效，然后将它放回另一个div。但是它并不总是有效的，它会被不一致地触发

我不能提供任何fiddlelink或使用SO的代码片段。我没有完全访问internet的权限，只有少数网站像SO或Microsoft MSDN一样对我可用

这是我的html：

<html>
<body>
    <div>       
        <input type="button" style='width : 100px; height: 100px; padding-left: 30px;' value="B2" onclick="removeAll();document.getElementById('customFilterRSp2').style.display='block';"/>
    </div>

    <div id="customFilterRSp2" class="filterRSp" >
        <div class="wraper">
            <div >
                <input type="button" value="Opt1" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,2);"/>

                <input type="button" value="Opt2" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,3);"/>

                <input type="button" value="close" style = "float: right" onclick="closeSlide(this.parentNode);"/>
            </div>
        </div>

        <div id="subCustomFilter3" class="subfilterRSp">
            <div >
                <input type="button" value="SOUS OPT 2" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,3);"/>
                <input type="button" value="close" style = "float: right" onclick="closeSlide(this);"/>
            </div>
        </div>      

        <div id="subCustomFilter2" class="subfilterRSp">
            <div >
                <input type="button" value="SOUS OPT 1" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,2);"/>
                <input type="button" value="close" style = "float: right" onclick="closeSlide(this);"/>
            </div>
        </div>
    </div>

</body>
<html>

CSS:


wraper先生{
身高：100%
}
.subfilterRSp{
显示：无；
位置：相对位置；
左边距：-20px；
左：0；
宽度：100%；
高度：470px；
填充：20px；
盒影：0.10px 0.px rgba（50,50,50,0.3）；
背景色：白色；
z指数：1000；
溢出：自动；
}
.filterRSp{
显示：无；
位置：相对位置；
左：10%；
宽度：80%；
高度：400px；
填充：20px；
盒影：0.10px 0.px rgba（50,50,50,0.3）；
背景色：白色；
z指数：1001；
溢出：隐藏；
}
斯莱德普先生{
高度：30px；
溢出：隐藏；
边界半径：4px4p0；
-webkit过渡：高度0.2s；
-moz过渡：高度0.2s；
-ms转换：高度0.2s；
-o型过渡：高度0.2s；
过渡：高度0.2s；
z指数：1100
}

还有错误的javascript：

<script>
function closeSlide(el){
    el.parentNode.parentNode.style.display = "none";
}

function SlideUp(el, n){
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.currentSlideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('currentSlideUp');
        els[i].style.display = "none";
    }

    setTimeout(function(){
        el.className += "  slideUp";
        var curEl = document.getElementById('subCustomFilter'+n);
        curEl.className += " currentSlideUp";
        curEl.style.display = "block";

    }, 10);


}

function removeAll(){
    var els = document.querySelectorAll('.subfilterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }   
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.filterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }

}


功能关闭滑块（el）{
el.parentNode.parentNode.style.display=“无”；
}
功能滑块（el，n）{
els=document.queryselectoral（'.slideUp'）；
对于（变量i=0；i



要查看问题，请在Opt1和Opt2之间单击，它将使divs slideUp，有时它将切换到另一个div而不显示动画
 setTimeout不等于“sleep”，它不会像“sleep”那样阻止脚本的执行。@Teemu我可以用什么来代替setTimeout？这是我唯一能想到的推迟行动的方法。什么是最低浏览器？@BenAston他们没有指定最低浏览器要求。只要它不支持所有浏览器的最新版本，我想这是好的。他们没有提到任何特定的浏览器。请尝试此延迟功能
<script>
function closeSlide(el){
    el.parentNode.parentNode.style.display = "none";
}

function SlideUp(el, n){
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.currentSlideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('currentSlideUp');
        els[i].style.display = "none";
    }

    setTimeout(function(){
        el.className += "  slideUp";
        var curEl = document.getElementById('subCustomFilter'+n);
        curEl.className += " currentSlideUp";
        curEl.style.display = "block";

    }, 10);


}

function removeAll(){
    var els = document.querySelectorAll('.subfilterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }   
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.filterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }

}