笔记-10-JavaScript高级补充（节流防抖）

codeez 发布于 2022-2-26 13:02 阅读：1748 笔记

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式。
localStorage 本地存储，永久性存储，关闭网页也存在
sessionStorage 会话存储，提供本次会话的存储，关闭页面数据清除

搜索框的联想词可以用防抖
用户缩放浏览器的resize事件
监听浏览器滚动，完成某些特定操作

当事件触发时，相应的函数并不会立即触发，而是等待一定时间。
当事件密集触发时，函数的触发会被频繁的推迟
只有等待了一段时间，也没有再次触发函数，就会触发响应函数

防抖：

const inpEl = document.getElementById("inp");
      inpEl.onclick = debounce(function () {
        console.log("触发了事件");
      }, 2000);

      function debounce(fn, delay) {
        let timer = null;
        return function () {
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
           fn.call(this);
            timer = null;
          }, delay);
        };
     }

节流：
不管触发的速度有多快，始终按照一定的频率来触发。
throttle

function throttle(fn, interval) {
        let startTime = 0;
        return function () {
          const nowTime = new Date().getTime();
          const waitTime = interval - (nowTime - startTime);
          if (waitTime <= 0) {
            fn();
            startTime = nowTime;
          }
        };
      }

请求头content-type表示这次请求携带的数据类型

application/x-www-form-urlencoded 表示数据被编码成以'&'分隔的键 - 值对，同时以'=' 分隔键和值
application/json 表示是json类型
text/plain 表示文本类型
application/xml 表示是xml类型
multipart/form-data 表示上传的文件

accept-encoding 告知服务器，客户端支持的文件压缩格式，比如js文件可以用gzip编码，对应.gz文件

响应状态码
具体可查看MDN文档地址：https://developer.mozilla.org/zh-CN/docs/web/http/status

GET没有请求体，通过地址在请求头中携带数据，一般几k，携带的参数如果是非英文就需要编码 POST既可以通过地址在请求头中携带，也可以通过请求体携带数据，理论携带无限数据。一般GET会被浏览器缓存，POST不会被缓存。301表示永久重定向，302表示临时重定向
cookie的值如果包涵非英文字母，写入时要用encodeURIComponent()编码，读取时用decodeURIComponent()解码到期的cookie会被浏览器清除，如果没有设置失效时间，就叫会话cookie，存在内存中，关闭浏览器时就清除

Domain限定了访问cookie的范围，使用js只能读取当前域或者父域的cookie。无法读取其他域的cookie想限定cookie在某路径下才能访问，用path属性。当Name、Domain、Path三个属性相同时才是同一个cookie设置了HttpOnly属性的cookie不能通过js去访问Secure限定了只有使用https的时候才可以发给服务端
1.前后端都可以创建Cookie2.每个域名下的Cookie数量有限3.每个cookie大概最多能存4kb
localStorage是本地存储，不会发送到服务端。
JSON中没有undefined（简单值）JSON.parse将json字符串解析为js对象，JSON.stringify相反
跨域：不同域名、端口、协议
CORS 跨域资源共享（老浏览器不支持IE10及以上） JSONP script
响应头中设置：Access-Control-Allow-Origin：*意思就是允许所有跨域请求
JSONP的原理就是script标签可以加载任何地方的资源不会被跨域限制
服务器端要准备好JSONP接口，是一个函数的调用，并传值 handleResponse({值})，函数名当前端请求是什么就变成什么

XHR的属性xhr.responseText 是文本形式获取到的响应数据在send前，xhr.response.Type = 'text' 意思是让响应数据以文本形式，可以设置为xhr.responseType= 'json'这样返回值就是JSON格式，不能用xhr.responseText来获取了，而是xhr.response，其实返回的还是json格式字符串并不是真的对象，只是浏览器处理了下但是responseType和responseIE6-9不支持timeout 设置超时时间，单位毫秒ms在open之后，send之前设置xhr.timeout=10，如果超时会触发一个timeout事件，IE6-7不支持，IE8开始支持
withCredentials属性指定使用Ajax发送请求时是否携带cookie，默认同域会携带，跨域不携带。IE10开始支持如果需要跨域时携带 xhr.withCredentials=true，最终能否成功还要看服务端服务端CORS配置就不能是*，要指定具体的域名

XHR的方法abort()终止当前请求有同名的abort事件，要在send之后调用setRequestHeader(头部字段名，头部字段值)设置请求头信息，只有很少一部分可以自己设置。大部分头信息浏览器为了安全不让设置。在open后。send前设置用来告诉服务器浏览器发送的数据是什么格式setRequestHeader('Content-Type','application/x-www-form-urlencoded') //当是post想要发送类似get形式的参数（username=xxx&age=18）在form表单标签中的enctype里默认就是application/x-www-form-urlencoded，可以把ajax伪装成表单，发送的形式就会是FormData

// Ajax的使用步骤
        //创建xhr对象
        const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
        const xhr = new XMLHttpRequest()
        //为了兼容性更好，把这个监听事件放open前更好
        //监听事件，处理响应，readystatechange监听readyState的变化
        //readyState的值有0-4 五个状态
        //0:未初始化，没有调用open
        //1：启动，已经调用open，但未调用send
        //2：发送，已经调用send，但未收到响应
        //3：接收，已经接收到部分响应数据
        //4：完成，已经接收到全部响应数据，而且已经可以在浏览器中使用
        //readystatechange可以配合addEventListener使用，IE6-8不支持addEventListener
        xhr.onreadystatechange = function(){
            //如果状态不是4直接返回
            if(xhr.readyState !== 4) return;
            //判断http状态码
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                console.log('正常！',xhr.responseText);
            }else {
                console.log("错误！");
            }
        }

        //准备发送请求，如果是get请求，参数在这步写,最后一个true是启用异步
        xhr.open('GET',url,true)
        //发送,这一步携带的参数是通过请求体携带，如果是get，最好写个null在send里，更好的兼容
        //发对象的话要用JSON.stringify包一下
        xhr.send(null)

XHR的事件写在open前load事件：当响应数据可用时触发，从IE9开始支持，和addEventListener一样。error事件：请求发生错误时触发（和响应没关系）IE10开始支持abort事件：IE10开始支持timeout事件：请求超时了就会触发IE8开始支持
fetch它想为了替换axios，但是它现在还不成熟，没有abort、没有timeout等fetch基于Promise，不用引入，原生就有fetch(url).then(response=>{}).catch(err=>{})fetch(url,{配置项})有method:，但是没有params参数，只能在url后面自己加，body通过请求体发送，如果想在body中通过请求体传类似URL名值对的形式的数据，要headers参数中写Content-Type:application/x-www-form-urlencoded，body里面不能直接放对象要用JSON.stringify转一下，如果要跨域 mode:'cors'，如果想携带cookie要写credentials:'include'
body里是数据流，只能被读一次，读一次后bodyUsed就变成true锁死了如果ok属性是true就可以直接用数据，不用判断HTTP状态码了status是状态码，statusText是状态码的说明
使用json方法可以返回存储着响应数据的promise对象，所以要在then里获取，如果返回值是字符串可以用text()

前端