$(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 秒之前不会尝试执行任何操作。

Answer 2

加载时计算一次 screenWidth，因此您无需一遍又一遍地搜索 div#thumbs。

Answer 3

onresize 事件触发的频率似乎跨浏览器不一致。您可能需要实现自定义机制来控制时间。

Answer 4

创建一个变量 displayed 来存储按钮是否可见的当前状态。现在，在 resize 事件中，只有在它们隐藏时才执行 fadeIn 操作。

您还可以存储选定的元素，以免每次都进行选择。

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

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

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

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

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

Answer 5

En este ejemplo vemos como se ejecutara el codigo cada vez que se termine de redimensionar la ventana （在本例中，我们看到每次完成调整窗口大小时代码是如何执行的）

演示 1

JAVASCRIPT

$(document).ready(function ()
{
    iniciar();
});