slideToggle 然后动态创建内容和 slideToggle 返回的正确方法

Question

我有一个 div 有一些元素。当用户选择一个按钮时，div 被清除并动态填充新内容。在清除 div 之前和填充它之后，我运行 slideToggle。隐藏 div 的第一个开关工作正常。第二个 slideToggle 没有运行（新的 div 只是在没有动画的情况下加载）。

我花了几个小时来尝试不同的事情（回调函数、.on、承诺、将第二个 slideToggle 函数放在代码的不同部分，等等）。我终于通过使用 setTimeout 1 毫秒的时间让它工作。尽管它有效，但我比以往任何时候都更加困惑，并且质疑我生活中的一切。请帮助我了解发生了什么。

工作代码：

changeCat:function(catName){
    domObject.$positionsDiv.slideToggle(function(){
        domObject.$positionsDiv.html('');
        let yourCategories = getSubFolders(catName+"/");

        if(catName==='s'){
            tSCat.drawCats(yourCategories);

        } else if(catName==='g'){
            tGCat.drawCats(yourCategories);
        }
        setTimeout(function (){
            domObject.$positionsDiv.slideToggle(function(){
                resizeCanvas()
            });
        }, 1)

    });
},

真正让我困惑的是，如果我控制台记录目标的高度 div。

我希望最后调用的控制台日志（“高度 5”）最先调用。
div 高度（“高度 3”）是在我调用第二个切换之前完全填充 div 的高度（为什么它不起作用？）。

非工作代码（无超时，有控制台日志）

changeCat:function(catName){
    domObject.$positionsDiv.slideToggle(function(){
        console.log('height 1: ' + domObject.$positionsDiv.height())
        domObject.$positionsDiv.html('');
        console.log('height 2: ' + domObject.$positionsDiv.height())
        let yourCategories = getSubFolders(catName+"/");

        if(catName==='s'){
            tSCat.drawCats(yourCategories);

        } else if(catName==='g'){
            tGCat.drawCats(yourCategories);
        }

        console.log('height 3: ' + domObject.$positionsDiv.height())
            domObject.$positionsDiv.slideToggle(function(){
                console.log('height 4: ' + domObject.$positionsDiv.height())
                resizeCanvas()
            });
    });
    console.log('height 5: ' + domObject.$positionsDiv.height())
},

按此顺序返回的控制台日志具有以下值：

height 5: 359.333 
height 1: 2214 
height 2: 0
height 3: 3744
height 4: 324

Answer 1

“传统”方法是将“显示”代码放在“隐藏”回调中：

$("#d").slideToggle(function() {
  $(this).html("a<br/>b<br/>c<br/>");
  $(this).slideToggle()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='d'>
  1<br/>2<br/>3<br/>
</div>

在 1 毫秒超时后调用“show”与立即调用“show”时发生的情况相同。

.slideToggle() 使用 .animate() 并且同一 DOM 节点上的每个 .animate() 调用都会排队。那么会发生什么：

你的“隐藏”开始
“演出”已排队
隐藏完成并在“不可见”时调用回调设置内容
车展de-queues

$("#d").slideToggle(function() {
  $(this).html("a<br/>b<br/>c<br/>");
});
$(this).slideToggle()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='d'>
  1<br/>2<br/>3<br/>
</div>

slideToggle 然后动态创建内容和 slideToggle 返回的正确方法

Proper way to slideToggle then dynamically create content and slideToggle back

javascript

jquery

dom

slidetoggle