함수 절류

함수 절류: 고정된 시간 동안 함수는 한 번만 실행합니다

  // 
  window.onload = function () {
    let flag = false;
    document.getElementsByTagName('body')[0].onscroll = function () {
      if(flag){
        return;
      }
      flag = true;
      setInterval(function () {
        console.log('111')
        flag = false;
      },2000)
    }
  }

함수 떨림 방지

함수 지연 실행: 함수 실행 종료 후 2초 후 인쇄

// 
window.onload = function () {
  let timer = false;
  document.getElementsByTagName('body')[0].onscroll = function () {
    if(timer){
      clearInterval(timer);
    }
    timer = setInterval(function () {
      console.log('2222')
    },2000)
  }
}

window.requestAnimationFrame()

window.requestAnimationFrame()

window.requestAnimationFrame () 방법은 브라우저에서 애니메이션을 실행하고 브라우저에 다음 다시 그리기 전에 지정한 함수를 호출하여 애니메이션을 업데이트할 것을 요청합니다. 이 방법은 매개 변수로 리셋 함수를 사용합니다. 이 리셋 함수는 브라우저가 다시 그리기 전에 호출됩니다
window.cancelAnimationFrame(requestid)은 이전에 호출된 윈도우를 취소합니다.requestAnimationFrame() 메서드를 계획의 애니메이션 프레임 요청에 추가합니다.requestID는 이전에 호출된 윈도우입니다.requestAnimationFrame() 메서드 시 반환되는 ID

Title * { margin:0; padding:0; } #test { width: 200px; height: 200px; background: green; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; } window.onload = function () { let i = 0; window.requestAnimationFrame(fn); function fn() { i+=10; document.getElementById('test').style.transform = 'translateX('+i+'px)'; window.requestAnimationFrame(fn); } }

storage

스토리지 이벤트:

• Storage 对象发生变化时（即创建/更新/删除数据项时，Storage.clear() 方法至多触发一次该事件）会触发
• 在同一个页面内发生的改变不会起作用
• 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)

방법

 key        :   key ， clear(), null
 newValue    :   ， clear(), null
 oldValue    :   value , clear(), null
 url         :   url
 storageArea :   storage 

localStorage 및 sessionStorage

모두 로컬 캐시를 가리킨다
sessionStorage: 세션 캐시.주기: 브라우저 열기에서 브라우저 닫기까지
localStorage: 5M을 삭제하지 않으면 영구적입니다
cookie:4kb
방법:
추가: setItem(key,value)
가져오기: getItem(key)
삭제:removeItem(key)
지우기:clear();
참고: JSON 데이터만 저장됩니다

데이터 동기화

파일 1.html

  window.onload = function () {
document.getElementById('test').onblur = function () {
  let value = this.value;
  localStorage.setItem('VALUE',value);
}
}

파일 2.html

  window.addEventListener('storage',function (event) {
console.log(event.newValue);
})

참고: 파일 1의 캐시 내용을 수정하면 파일 2의 콘솔에서 인쇄됩니다.