Javascript-keyup event firing multiple

Question

我正在使用hotkeys plugin來爲關鍵事件添加處理程序。 我做了一個圖像滑塊，在那裏我通過雜誌的封面圖像。 我首先製作了一個腳本，用戶可以通過點擊導航按鈕瀏覽雜誌的封面。

$(document).ready(function() { 
    imagesIndex = 0, 
    nextImage = 0, 
    loadedImages = []; 

    if (typeof images !== 'undefined') { 

    preload(); 

    $('#forward').click(forwardClick); 
    $('#back').click(backClick); 
    } 
}); 

var preload = function() { 
    for (i = 0; i < 4; i++) { 
    if (nextImage < images.length) { 
     var img = new Image(); 
     img.src = '/imagecache/cover/' + images[nextImage]; 
     loadedImages[nextImage] = img; 
     ++nextImage; 
    } 
    } 
} 

var forwardClick = function() { 
    imagesIndex++; 

    preload(); 
    $('#back').removeClass('not-allowed'); 

    if (imagesIndex > (loadedImages.length - 1)) { 
     imagesIndex = loadedImages.length - 1; 
    } 

    if (imagesIndex > (loadedImages.length - 2)) { 
     $('#forward').addClass('not-allowed'); 
    } 

    $('#cover-image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name}); 
} 

var backClick = function() { 
    imagesIndex--; 

    $('#forward').removeClass('not-allowed'); 

    if (imagesIndex < 0) { 
     imagesIndex = 0; 
    } 

    if (imagesIndex < 1) { 
     $('#back').addClass('not-allowed'); 
    } 

    $('#cover-image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name}); 
} 

module.exports.preload = preload; 
module.exports.forward = forwardClick; 
module.exports.back = backClick; 

這工作正常有，我選擇的雜誌，其中當用戶點擊一個，獲取滾動到該雜誌的詳細信息，用戶點擊了創建一個節。每當用戶點擊某本雜誌時，我都會動態更改該部分，並用點擊的雜誌更新詳細信息。用戶可以通過點擊導航按鈕瀏覽該雜誌的封面。 所以，每次用戶點擊了一些新的雜誌，我調用這個函數：

var showMagazineDetail = function showMagazineDetail(id, slug, name, summary, issueImage, magazineImage, visiolinkPrefix, page){ 
    images = []; 
    nextImage = 0; 
    imagesIndex = 0; 
    loadedImages = []; 

    ...rest of the code 

在這裏，我清空images和loadedImages陣列。 所以，這部分工作正常。我遇到的問題是關鍵事件。 我已經制作了這個腳本，在那裏檢查該部分是否在視口中，然後啓用通過雜誌封面。

var issueImages = require('./issue-images'); 
var forward = issueImages.forward; 
var back = issueImages.back; 

$(document).ready(function() { 
    var coverImage = $('.magazine-hero'); 
    window.onscroll = function() { 
    var coverVisible = isElementInViewport(coverImage); 

    if (coverVisible) { 
     $(document).on('keyup', null, 'right', forward); 
     $(document).on('keyup', null, 'left', back); 
    } 
    }; 

}); 


function isElementInViewport(el) { 
    var rect = el[0].getBoundingClientRect(); 

    return rect.bottom > rect.height*0.8 && 
     rect.top < ((window.innerHeight*0.7) || (document.documentElement.clientHeight*0.7)) && 
     rect.right > 0 && 
     rect.left < (window.innerWidth || document.documentElement.clientWidth); 
} 

的問題是，當我按下鍵進入其立即轉到該雜誌的封面最後的下蓋。 當我在控制檯檢查imagesIndex，我可以看到，按right key arrow的index變爲12（這是該雜誌的封面最後）則會立即：

1問題，images.js？ 828c：28 2 issue-images.js？828c：28 3 issue-images.js？828c：28 4 issue-images.js？828c：28 5 issue-images.js？828c：28 6問題圖像。 js？828c：28 7 issue-images.js？828c：28 8 issue-images.js？828c：28 9 issue-images.js？828c：28 10 issue-images.js？828c：28 11 issue -images.js？828c：28 12

Answer 1

正如在jquery文檔中提到的 「當用戶按下鍵盤上的按鍵時，keydown事件被髮送到元素。如果保持按壓鍵，該事件的每個操作系統重複鍵時間發送「。

你到最後的圖像，因爲函數被調用多次。

使用keyup事件，而不是的KEYDOWN

$(document).on('keyup', null, 'right', forward); 
$(document).on('keyup', null, 'left', back); 

並設置事件的單一時間

var issueImages = require('./issue-images'); 
var forward = issueImages.forward; 
var back = issueImages.back; 
var eventBinded = false; 

$(document).ready(function() { 
    var coverImage = $('.magazine-hero'); 
    window.onscroll = function() { 
    var coverVisible = isElementInViewport(coverImage); 

    if (coverVisible && !eventBinded) { 
     $(document).on('keydown', null, 'right', forward); 
     $(document).on('keydown', null, 'left', back); 
     eventBinded = true; 
    } 
    }; 
});