데욱이의 블로그

AjaxCall의 Async가 false일 때

2019-08-23T00:00:00+00:00

Explain

ajax로 여러가지를 하다보니 다음과 같은 현상이 있었다.

기본적으로 ajaxcall을 할 때 사용하는 XMLHttpRequest.open에서 async 옵션을 false로 줘도 ajaxcall 이전의 것은 painting을 한다.
1의 조건에서 onreadystatechange에 alert시 painting을 하지 않는다.
1의 조건에서 서버측이 thread.sleep을 가지고 있는 경우 ajaxcall이전의 것도 그려지지 않는다.(painting이 안됨)

3번을 막으려면 아마도 setTimeOut으로 따로 ajaxcall을 큐에 넣어 앞의 것을 painting 해야하지 않을까 싶은데..

Example

1번 - onreadystatechange를 실행하기 전 red로 배경색이 칠해짐

<div style="height:100px; background-color:red"></div>
<div id='main'></div>
<script type="text/javascript">
  const ajax = () => {
    var request = new XMLHttpRequest();
    
    request.onreadystatechange = function ()  {
      if (this.readyState == 4 && this.status == 200){ 
        // alert(1);
        document.querySelector("#main").innerText = this.responseText
      }
    }
    request.open("GET", "./test.jsp", false); // 동기 상태
    request.send();
  }
  ajax();  
</script>

2번 - onreadystatechange를 실행하기 전 red로 배경색이 칠해지지 않음

<div style="height:100px; background-color:red"></div>
<div id='main'></div>
<script type="text/javascript">
  const ajax = () => {
    var request = new XMLHttpRequest();
    
    request.onreadystatechange = function ()  {
      if (this.readyState == 4 && this.status == 200){ 
        alert(1);
        document.querySelector("#main").innerText = this.responseText
      }
    }
    request.open("GET", "./test.jsp", false); // 동기 상태
    request.send();
  }
  ajax();  
</script>

3번 - onreadystatechange를 실행하기 전 red로 배경색이 칠해지지 않음

// 클라이언트
<div style="height:100px; background-color:red"></div>
<div id='main'></div>
<script type="text/javascript">
  const ajax = () => {
    var request = new XMLHttpRequest();
    
    request.onreadystatechange = function ()  {
      if (this.readyState == 4 && this.status == 200){
        document.querySelector("#main").innerText = this.responseText
      }
    }
    request.open("GET", "./test.jsp", false); // 동기 상태
    request.send();
  }
  ajax();  
</script>

// 서버
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html");
  response.setStatus(200);
  
  Thread.sleep(5000)
  String result = "받았어요";
  
  out.print(result);
  
  
%>

마우스 클릭 이벤트 순서(mouse click event)

2019-08-17T00:00:00+00:00

Explain

마우스 클릭시 발생하는 이벤트 순서는 onmousedown -> onmouseup -> click 순이다.

onmousedown되고 onclick 되고 onmouseup아닌가라고 생각하기 쉬운데 아니더라.. ㅋ

참고로 onmousedown에서 alert를 띄우면 클릭해도 onmouseup, onclick 이벤트 모두 발생하지 않지만, onmouseup에서 alert를 띄우면 onclick까지 정상적으로 먹는다.

보아하니 down에서 alert시에는 이벤트가 끊기지만 up에서 alert를 하는 경우는 down에서 먹은 이벤트가 up과는 별개로 click까지 가는 모양이다.

Example

클릭

클리어

alert

IE 스크롤 제약 사항(IE scroll limit)

2019-08-15T00:00:00+00:00

Explain

IE에는 스크롤할 수 있는 양의 제약이 있다.

정확히 말하자면 스크롤 내에 들어갈 수 있는 픽셀수가 제약이 있는데, 이는 대략 1533767px 이다.

저 정도를 넘어갈일은 없지만 대용량 데이터를 로딩하는 경우 일부 데이터가 스크롤이 안될 문제가 발생할수 있겠다.

아래 예제를 ie에서 해보자.

Example

1704803px

1531000px

minimal mistakes 테마를 이용해 github.io 블로그 구축하기

2019-08-10T00:00:00+00:00