JS前端同源策略和跨域及防抖节流详解

 

引言

协议，域名，端口相同，就具有相同的源

同源策略：浏览器提供的一个安全策略

跨域的出现原因：浏览器的同源策略不允许非同源的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)
    })
  })

 

防抖和节流的区别

  • 防抖：事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略
  • 节流：事件被频繁触发，节流能够减少事件触发的频率，有选择性的执行一部分事件

以上就是JS前端同源策略和跨域及防抖节流详解的详细内容，更多关于JS同源策略跨域防抖节流的资料请关注编程宝库其它相关文章！

 1.地图初始化相关文档:lbs.baidu.com/index.php?t…申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 ...