게으른 로딩이 종종 작동하지 않습니다.

Question

다음 코드에 대해 이상한 동작이 발생합니다.

function linkFunc(scope, element, attribute) { 
     var page = angular.element($window); 

     page.bind('scroll', function() { 

      var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; 
      var body = document.body, html = document.documentElement; 
      var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 
      var windowBottom = windowHeight + window.pageYOffset; 

      if (windowBottom >= docHeight) { 
       scope.$apply(attribute.myDirective); 
      } 
     }); 
    } 

위는 그것이 가장 큰 문제는 대부분의 시간이다 myDirective

에 어떤 기능이 결합 호출에 도달하면 페이지의 하단에 도달하면 감지 코드 조각입니다 지연로드가 작동하고 myDirective이 성공적으로 호출됩니다. 그러나 일부에서는 게으른 로딩이 작동하지 않으며 버그를 재현 할 수 없었습니다.

나는 다른 화면 크기, 다른 브라우저를 시도했지만 버그가 무작위로 발생하는 것처럼 보입니다.

어쩌면 누군가가 전에 이런 일이 있었고 방향을 제시 할 수 있습니까?

편집 :

더 많은 정보

내가 실험 조금 후에 버그를 재현 할 수 있었다. 브라우저의 비율의 확대가 < 100 % 때

기본적으로, window.pageYwindowBottom가 0.1

예를 들어 0.9에 의해 꺼져있는 원인이되는 약간 부정확 진수 값을 반환합니다.

  console.log(windowBottom); // 1646.7747712336175 
      console.log(docHeight); // 1647 

왜 이런 일이 발생하는지 알고 계십니까?

편집 2 :

위의 행동은 비 결정적이지만, 소수 부분은 사실이다. !

Answer 1

0.1 + 0.2 0.3 ==

이 하나의 자바 스크립트 아니라 기이이고; 실제로 컴퓨터 과학에서 널리 퍼진 문제이며 많은 언어에 영향을 미칩니다. 이 출력은 0.30000000000000004입니다.

이것은 기계 정밀도와 관련된 문제입니다. JavaScript가 위의 행을 실행하려고하면 값을 2 진수로 변환합니다. 여기가 문제의 시작입니다. 0.1은 실제로 0.1이 아니라 이진 동등한 값으로, 근사값 (그러나 동일하지 않음) 값입니다. 본질적으로, 당신이 값을 쓰 자마자, 그것들은 그들의 정확성을 잃어 버리게된다. 여러분은 단지 두 개의 간단한 십진수를 원했을 것입니다. 그러나 Chris Pine이 말한 것처럼 여러분이 얻는 것은 바이너리 부동 소수점 연산입니다. 러시아어로 번역 된 텍스트를 원하지만 Belorussian을 얻는 것과 같습니다. 유사하지만 동일하지는 않습니다.

here을 더 읽을 수 있습니다. 브라우저 소스를 파헤 치지 않고서도 문제가 발생했다고 생각합니다.

Answer 2

부동 소수점 정밀도 문제가있는 경우 두 값이 1 픽셀보다 작 으면 대신 조건을 확인하여 확인하십시오.예를 들면 다음과 같습니다.

if (Math.abs(windowBottom - docHeight) < 1) { 
    scope.$apply(attribute.myDirective); 
}