javascript - 每次按 "next"按键后，自定义 js 图像查看器加载速度变慢

Question

我已经构建了一个工作正常的自定义图像查看器，但每次我使用箭头查看下一个或上一个图像时，它的加载速度越来越慢。到第 10 个图像时，可能需要花费几分钟，甚至卡住。我用来打开查看器的片段与我用来移动到下一张图像的片段相同，并且每次打开总是快如闪电；只有当我使用箭头键时，速度才会变慢。有时 .php 文件根本不会加载，它只会说“未定义”，我相信它来自 JS 的某个地方？

function image_load(id) {
    $('.view').empty().load(image-viewer.php?id='+id, function() {
        $(document).keyup(function(e) {
            if (e.keyCode == 39) { 
                var next = $('#next').attr('alt');
                if(next != "null") {
                    image_load(next);
                    return false;
                }
            }
            if (e.keyCode == 37) { 
                var prev = $('#prev').attr('alt');
                if(prev != "null") {
                    image_load(prev);
                    return false;
                }
            } 
        });
    }); 
}

因此下一个/上一个引用它们所包含的函数。它是否以某种方式创建无限循环并减慢处理器速度？

Answer 1

根据我的评论，您正在创建一个无限循环，因为您一遍又一遍地重复绑定(bind)关键事件。您应该做的是将函数声明与事件处理程序分开:

var image_load = function(id) {
    $('.view').empty().load('image-viewer.php?id='+id);
};

$(document).keyup(function(e) {
    // Prevent default key actions
    e.preventDefault();

    // Evaluate pressed keys
    if (e.keyCode == 39) { 
        var next = $('#next').attr('alt');
        if (next) image_load(next);
    } else if (e.keyCode == 37) { 
        var prev = $('#prev').attr('alt');
        if (prev) image_load(prev);
    } 
});