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

2022-09-08 18:04:45

引言

協定，域名，埠相同，就具有相同的源

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

跨域的出現原因：瀏覽器的同源策略不允許非同源的URL之間進行資源的互動

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

JSONP：只支援GET請求

通過script標籤的src屬性，請求跨域的資料介面，並通過函數呼叫的形式，接收跨域介面響應回來的資料

CORS：出現的較晚，是W3C標準，屬於跨域Ajax請求的根本解決方案，支援GET和POST請求，不相容低版本的瀏覽器

jQuery中JSONP的實現

jQuery中的JSONP 通過script標籤的src屬性，實現跨域資料存取的，jQuery採用的是動態建立和移除script標籤的方式，來發起JSONP資料請求

在發起JSONP請求的時候，動態向head中append一個script標籤

JSONP請求成功之後，動態從head中移除剛才append進去的script標籤

$(function () {
      $.ajax({
        url: "http://www.liulongbin.top:3006/api/jsonp?name='zs'&age=12",
        dataType: 'jsonp',
        // 傳送到伺服器的引數名稱，預設值為callback
        jsonp: 'callback',
        // 自定義回撥函數名稱 預設值為jQueryxxxx
        jsonpCallback: 'abc',
        success(res) {
          console.log(res)
        },
      })
    })

防抖【重要】

防抖策略：當事件被觸發後，延遲n秒後再執行回撥，如果在這n秒內事件又被觸發，則重新計時

應用場景：

使用者在輸入框中連續輸入一串字串，可以通過防抖策略，只在輸入完後，才執行查詢的請求，這樣可以有效的減少請求次數，節約請求資源

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:將搜尋結果儲存到快取物件中

 // 渲染UI結構
    function renderSUggestList(res) {
      // 如果沒有資料需要渲染 直接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獲取使用者輸入的內容 當做鍵
      var k = $('#ipt').val().trim()
      // 將資料作為值 進行快取
      cacheObj[k] = res
      // console.log(cacheObj)
    }

3優先從快取中獲取搜尋列表

  $('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      // 1獲取使用者輸入的內容
      var keywords = $(this).val().trim()
      // 2 判斷使用者輸入的內容是否為空
      // 清空搜尋列表
      if (keywords.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      // console.log(keywords)
      //  先判斷快取中是否有資料
       if (cacheObj[keywords]) {
        return renderSUggestList(cacheObj[keywords])
      }
      // 1-2定義防抖
      // 獲取搜尋列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

節流【重點】

節流策略：可以減少一段時間內事件的觸發頻率

場景：

滑鼠連續不斷的觸發某事件(點選),只在單位時間內觸發一次

懶載入時要監聽計算卷軸的位置，不必每次滑動都觸發，可以降低計算的頻率，而不必去浪費CPU資源

節流閥為空，可以執行下次操作；不為空，不能執行下次操作

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

每次執行操作前，先判斷節流閥是否為空

$(function () {
      // 獲取圖片
      var angel = $('#angel')
      // 定義一個timer節流閥
      var timer = null
      $(document).on('mousemove', function (e) {
        //每次執行操作前，先判斷節流閥是否為空  不為空 不能執行（證明距離上次執行不足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 //設定了滑鼠跟隨效果後，清空節流閥 方便下次開啟定時器
        }, 160)
      })
    })