Javascript 更改循环中的字体大小以适应高度

我试图在引导旋转木马中减少字体大小，当它的容器高度超过150px时

<div class="carousel-item">
 <div class="carousel-caption d-block">
  <h3><a href="#">Title</a></h3>
 </div>
</div>


$('#crsPos3,#crsPos4').on('slid.bs.carousel', function () {
        fixFontSize($(this)); 
})    

function fixFontSize(obj) {
        $(obj).find('h3').each(function () {
            a = $(this).find('a');
            var i = 0;
            while ($(this).outerHeight() > 150 && i < 1000) {
                var fs = parseInt($(a).css('font-size'));
                fs = (fs - 1) + 'px';
                $(a).css('font-size', fs);
                console.log($(obj).attr('id') + ' ' + fs);
                i=i+1;
            }
        });
    }

$（'#crsPos3，#crsPos4'）.on（'slided.bs.carousel'，function（）{
fixFontSize（$（此））；
})    
函数fixFontSize（obj）{
$（obj）.find（'h3'）。每个（函数（）{
a=$（this.find（'a'）；
var i=0；
而（$（this）.outerHeight（）>150&&i<1000）{
var fs=parseInt（$（a）.css（'font-size'））；
fs=（fs-1）+‘px’；
$（a）.css（'font-size'，fs）；
console.log（$（obj.attr（'id'）+''+fs）；
i=i+1；
}
});
}

我使用VARI来避免过载，但每次只减少1个像素。 控制台显示（1000）crsPos4 21px

---

谢谢

我找到了解决方案！也许，jquery函数.css是异步的，这就是为什么div没有改变它的高度。添加暂停以调用该功能：

function fixFontSize(obj) {
$(obj).find('h3').each(function () {
if ($(this).outerHeight() > 150) { 
$(this).find('a').css({ fontSize: function (i, v) { return parseInt(v) - 1; } }); setTimeout(function () { fixFontSize(obj); }, 10); } }); }

---

请使用演示问题的示例更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的问题。这里有一些可能的解决方案：你的。是不是在slided.bs.carousel事件触发后发生了其他事情？在

fixFontSize

末尾添加一个警报，以停止处理，查看代码执行了什么操作，然后查看在此之后是否有任何更改