$(window).resize()正在缓慢

Question

我有一张带缩略图的照片幻灯片.下一个/上一个按钮根据窗口大小显示和消失; 如果缩略图溢出窗口大小,则会出现按钮.如果没有,他们就会消失.我的问题是,有时,它们不会出现,或者它们不会出现几秒钟.在其他时候,他们不会消失.有时它工作正常.

我仍然是jQuery和JavaScript的新手.有什么建议？

    // hide previous and next buttons
$('#prev, #next').hide();

// get width of thumbnail list
var thumbsWidth = $('div#thumbs ul').width();

// show/hide next/prev buttons
function buttonVisibility() {
    if (thumbsWidth + 225 > screenWidth) {
        $('#prev, #next')
        .fadeTo('fast', 0.5)
        .hover(function(){
            $(this).fadeTo('fast', 1);
        }, function(){
            $(this).fadeTo('fast', 0.5);
        });
    } else {
        $('#prev, #next').fadeTo('fast', 0, function(){
            $(this).hide();
        });
    }
}

// declare global screenWidth variable
var screenWidth

// find width of thumbnail window and show/hide next/prev buttons accordingly
function findWidth(){
    screenWidth = $('div#thumbs').width();
    buttonVisibility();
}

// perform findWidth() on load and on window resize
findWidth();
$(window).resize(function(){
    findWidth();
});

Answer 1

可能是浏览器在调整窗口大小时必须要做的工作(也就是说,重新设计布局以响应不断变化的窗口大小),添加到你正在制作的DOM更改中,这只会让事情变得更糟糕.您可能会尝试在触发代码之前等待用户交互完成.

$(window).resize((function() {
  var timeout = null;
  return function() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(findWidth, 250);
  };
})());

这将改变一些事情,以便你的代码在用户暂停或停止拖动窗口后1/4秒之前不会尝试做任何事情.