Question

这让我有点生气。我已经setInterval正常使用Chrome，IE和Safari，但FireFox让我失望了很多时间。使用下面的代码，它没有设置我所定位的<li>的高度 - 你能明白为什么不这样做吗？

    // For fullscreen overlay navigation
    var uid = '#my-ul-id'
            function osuFixLiHeights(targetUl) {    
                var t       = $(targetUl);
                var ch      = $(t).height();
                var lih     = ch / 2;
                $(t).find('li').each(function(i) {
                    $(this).removeAttr(); // clear heights first as it seems this is needed to re-add the heights
                    setInterval(function () {
                        $(this).height(lih); // delay adding heights
                    },100);
                });
            }
     osuFixLiHeights(uid);

修改

感谢您的帮助到目前为止，非常感谢。下面的更新代码 - 正如我的一条评论中所提到的，这对于设置<li>的初始高度非常有用，我唯一的问题是在将浏览器窗口从较小的大小调整为更大的尺寸，<li>的高度设置正确，但是，缩小浏览器窗口不会改变<li>高度。

这是我正在使用的代码：

var didResize = (function(){
        var timer = 0;
        return function(callback, ms) {
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

function osuFixLiHeights(targetUl) {    
        var ch      = $(targetUl).height();
        var lih     = ch / 2;
        $(targetUl).find('li').each(function(i) {
            $(this).removeAttr(); // clear heights first
            var targetLi = $(this);
            setTimeout(function () {
                $(targetLi).height(lih); // delay adding heights 
            }, 100);
        });
    }

$(window).resize(function() {
        didResize(function() {
            osuFixLiHeights('#menu-overlay-nav');
        }, 500);
    });

Answer 1

我认为问题在于setInterval函数的主体。尝试将this分配给变量：

$(t).find('li').each(function(i) {
  $(this).removeAttr(); // clear heights first as it seems this is needed to re-add the heights
  var self = this; // Capture the current 'this' value
  setInterval(function () {
    // Here 'this' is not the same 'this' as before
    $(self).height(lih); // delay adding heights
  }, 100);
});

FireFox没有在setInterval中运行代码

1 个答案: