自定义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

根据我的评论，您正在创建一个无限循环，因为您一再重复绑定关键事件。你应该做的是将功能声明从事件处理程序中分离出来：

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); 
    } 
});