函数节流/函数防抖/requestAnimationFrame

函数节流

函数节流：每个固定的时候之内，函数只执行一次

  //代码实现
  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) 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求. requestID是先前调用window.requestAnimationFrame()方法时返回的ID.

storage

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中的缓存内容，文件二的控制台中会打印