自定義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); 
    } 
});