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

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

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

引言

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

同源策略：瀏覽器提供的一個安全策略

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

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

JSONP：只支持GET請求

通過script標簽的src屬性，請求跨域的數(shù)據(jù)接口，并通過函數(shù)調(diào)用的形式，接收跨域接口響應回來的數(shù)據(jù)

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

jQuery中JSONP的實現(xiàn)

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

在發(fā)起JSONP請求的時候，動態(tài)向head中append一個script標簽

JSONP請求成功之后，動態(tài)從head中移除剛才append進去的script標簽

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

防抖【重要】

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

應用場景：

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

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

緩存搜索的列表

1 定義全局緩存對象

var cacheObj= {}

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

 // 渲染UI結(jié)構(gòu)
    function renderSUggestList(res) {
      // 如果沒有數(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)容 當做鍵
      var k = $('#ipt').val().trim()
      // 將數(shù)據(jù)作為值 進行緩存
      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é)流【重點】

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

場景：

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

懶加載時要監(jiān)聽計算滾動條的位置，不必每次滑動都觸發(fā)，可以降低計算的頻率，而不必去浪費CPU資源

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

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

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

$(function () {
      // 獲取圖片
      var angel = $('#angel')
      // 定義一個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 //設置了鼠標跟隨效果后，清空節(jié)流閥 方便下次開啟定時器
        }, 160)
      })
    })