exit jquery $ .each

Question

return false이 아래의 $.each 루프를 종료하지 않는 이유는 무엇입니까?

var Items = { 
    "5340071": { 
     "alt": "Sample text" 
    }, 
    "5333539": { 
     "alt": "Sample text" 
    }, 
    // Etc. 
}; 

var viewportBottom = $(window).height() + $(window).scrollTop(); 
$.each(Items, function(itemId, objItem) {  
    $("<img src='/img/1503/4/" + itemId + ".jpg?h=150'>").on('load', function() { 
     $(document.body).append($(this)); 
     var imageTop = $(this).offset().top; 
     if (imageTop > viewportBottom) { 
      console.log('Exit loop'); // Text is printed in console 
      return false;    // This should break the $.each loop, but it doesn't 
     } 
    }); 
}); 

알려 주시기 바랍니다.

Answer 1

코드에서 $.each에 대한 콜백에서 return false이 없습니다. on으로 연결된 이벤트 처리기에는 return false이 있습니다.

일반적으로 중첩 콜백을 사용하여 외부 루프에 영향을 주려는 경우 플래그를 설정하고 외부 루프에서이를 확인할 수 있습니다. 핸들러가 호출 될 때까지 $.each 루프가 오랫동안 완료되었으므로 여기서는 불가능합니다.

뷰포트를 채울 때까지 이미지를 추가하는 것이 목표 인 경우 $.each을 사용할 수 없습니다. 이미지가로드 될 때까지 멈출 때를 알지 못하기 때문에 비동기로 발생합니다. 좋습니다. 이전 위치가 완료되면 다음 위치 로딩을 트리거 할 수 있습니다.

var Items = { 
    "5340071": { 
     "alt": "Sample text" 
    }, 
    "5333539": { 
     "alt": "Sample text" 
    }, 
    // Etc. 
}; 

var viewportBottom = $(window).height() + $(window).scrollTop(); 
var index = 0; 
var itemIds = Object.keys(Items); 
loadNextImage(); 
function loadNextImage() { 
    // Get this item ID 
    var itemId = itemIds[index++]; 

    // Get the alt text for it 
    var alt = Items[itemId].alt; 

    // Create the image WITHOUT a src 
    var img = $("<img>"); 

    // Apply the alt text 
    if (alt) { 
     img.attr("alt", alt); 
    } 

    // Hook the load handler BEFORE we set src 
    img.one('load', function() { 
     // Append the image to the body 
     img.appendTo(document.body); 

     // Do we have more? 
     if (index < Items.length) { 
      // Do we have room for more? 
      var imageTop = img.offset().top; 
      if (imageTop <= viewportBottom) { 
       // Yes, load the next one 
       loadNextImage(); 
      } 
     } 
    }); 

    // Now set the src 
    img.attr("src", "/img/1503/4/" + itemId + ".jpg?h=150"); 
} 

또한 이전 코드는 이미지가 캐시에 있다면 돌발 할 수있는 경쟁 조건을 가지고, 약 src 위의 비트를 확인합니다.

그리고 alt 텍스트를 사용하지 않으므로 위에 추가했습니다.