JS前端同源策略和跨域及防抖節(jié)流詳解

更新時(shí)間：2022年09月06日 15:42:41 作者：凸頭用海飛絲

這篇文章主要為大家介紹了JS前端同源策略和跨域及防抖節(jié)流詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

協(xié)議，域名，端口相同，就具有相同的源

同源策略：瀏覽器提供的一個(gè)安全策略

跨域的出現(xiàn)原因：瀏覽器的同源策略不允許非同源的URL之間進(jìn)行資源的交互

解決跨域由兩種方式：JSONP， CORS

JSONP：只支持GET請(qǐng)求

通過(guò)script標(biāo)簽的src屬性，請(qǐng)求跨域的數(shù)據(jù)接口，并通過(guò)函數(shù)調(diào)用的形式，接收跨域接口響應(yīng)回來(lái)的數(shù)據(jù)

CORS：出現(xiàn)的較晚，是W3C標(biāo)準(zhǔn)，屬于跨域Ajax請(qǐng)求的根本解決方案，支持GET和POST請(qǐng)求，不兼容低版本的瀏覽器

jQuery中JSONP的實(shí)現(xiàn)

jQuery中的JSONP 通過(guò)script標(biāo)簽的src屬性，實(shí)現(xiàn)跨域數(shù)據(jù)訪問(wèn)的，jQuery采用的是動(dòng)態(tài)創(chuàng)建和移除script標(biāo)簽的方式，來(lái)發(fā)起JSONP數(shù)據(jù)請(qǐng)求

在發(fā)起JSONP請(qǐng)求的時(shí)候，動(dòng)態(tài)向head中append一個(gè)script標(biāo)簽

JSONP請(qǐng)求成功之后，動(dòng)態(tài)從head中移除剛才append進(jìn)去的script標(biāo)簽

$(function () {
      $.ajax({
        url: "http://www.liulongbin.top:3006/api/jsonp?name='zs'&age=12",
        dataType: 'jsonp',
        // 發(fā)送到服務(wù)器的參數(shù)名稱(chēng)，默認(rèn)值為callback
        jsonp: 'callback',
        // 自定義回調(diào)函數(shù)名稱(chēng) 默認(rèn)值為jQueryxxxx
        jsonpCallback: 'abc',
        success(res) {
          console.log(res)
        },
      })
    })

防抖【重要】

防抖策略：當(dāng)事件被觸發(fā)后，延遲n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)事件又被觸發(fā)，則重新計(jì)時(shí)

應(yīng)用場(chǎng)景：

用戶在輸入框中連續(xù)輸入一串字符串，可以通過(guò)防抖策略，只在輸入完后，才執(zhí)行查詢的請(qǐng)求，這樣可以有效的減少請(qǐng)求次數(shù)，節(jié)約請(qǐng)求資源

var timer = null   //1-1防抖的timer
$('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      
      //省略其他代碼....
      // 1-2定義防抖
      // 獲取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

緩存搜索的列表

1 定義全局緩存對(duì)象

var cacheObj= {}

2:將搜索結(jié)果存儲(chǔ)到緩存對(duì)象中

 // 渲染UI結(jié)構(gòu)
    function renderSUggestList(res) {
      // 如果沒(méi)有數(shù)據(jù)需要渲染 直接return
      if (res.result.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      var rows = []
      // console.log(res.result)
      $.each(res.result, function (i, item) {
        // console.log(item[0])
        rows.push(`
            <div class="suggest-item">${item[0]}</div>
            `)
      })
      $('.suggest-list').empty().append(rows.join('')).show()
      // 1獲取用戶輸入的內(nèi)容 當(dāng)做鍵
      var k = $('#ipt').val().trim()
      // 將數(shù)據(jù)作為值 進(jìn)行緩存
      cacheObj[k] = res
      // console.log(cacheObj)
    }

3優(yōu)先從緩存中獲取搜索列表

  $('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      // 1獲取用戶輸入的內(nèi)容
      var keywords = $(this).val().trim()
      // 2 判斷用戶輸入的內(nèi)容是否為空
      // 清空搜索列表
      if (keywords.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      // console.log(keywords)
      //  先判斷緩存中是否有數(shù)據(jù)
       if (cacheObj[keywords]) {
        return renderSUggestList(cacheObj[keywords])
      }
      // 1-2定義防抖
      // 獲取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

節(jié)流【重點(diǎn)】

節(jié)流策略：可以減少一段時(shí)間內(nèi)事件的觸發(fā)頻率

場(chǎng)景：

鼠標(biāo)連續(xù)不斷的觸發(fā)某事件(點(diǎn)擊),只在單位時(shí)間內(nèi)觸發(fā)一次

懶加載時(shí)要監(jiān)聽(tīng)計(jì)算滾動(dòng)條的位置，不必每次滑動(dòng)都觸發(fā)，可以降低計(jì)算的頻率，而不必去浪費(fèi)CPU資源

節(jié)流閥為空，可以執(zhí)行下次操作；不為空，不能執(zhí)行下次操作

當(dāng)前操作執(zhí)行完，必須將節(jié)流閥重置為空，表示可以執(zhí)行下次操作了

每次執(zhí)行操作前，先判斷節(jié)流閥是否為空

$(function () {
      // 獲取圖片
      var angel = $('#angel')
      // 定義一個(gè)timer節(jié)流閥
      var timer = null
      $(document).on('mousemove', function (e) {
        //每次執(zhí)行操作前，先判斷節(jié)流閥是否為空  不為空 不能執(zhí)行（證明距離上次執(zhí)行不足16毫秒）
        if (timer) {
          return
        }
        timer = setTimeout(function () {
          console.log(e.pageX, e.pageY)
          angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
          timer = null //設(shè)置了鼠標(biāo)跟隨效果后，清空節(jié)流閥 方便下次開(kāi)啟定時(shí)器
        }, 160)
      })
    })