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

 更新时间:2022年09月06日 15:42:41   作者:凸头用海飞丝  
这篇文章主要为大家介绍了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同源策略跨域防抖节流的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序WXSS样式文件教程

    微信小程序WXSS样式文件教程

    这篇文章主要为大家介绍了微信小程序WXSS样式文件教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 微信小程序 限制1M的瘦身技巧与方法详解

    微信小程序 限制1M的瘦身技巧与方法详解

    这篇文章主要介绍了微信小程序 瘦身技巧与方法详解的相关资料,现在微信小程序 提交代码只有1M大小的限制,这就对开发者提出难题了,这里提供了相关方法技巧,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 教程之wxapp视图容器 swiper

    微信小程序 教程之wxapp视图容器 swiper

    这篇文章主要介绍了微信小程序 教程之wxapp视图容器 swiper的相关资料,需要的朋友可以参考下
    2016-10-10
  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    这篇文章主要分享的是如何利用js实现简单开关灯代码,下面文字围绕js实现简单开关灯的相关资料展开具体内容,需要的朋友可以参考以下,希望对大家又所帮助
    2021-11-11
  • 微信小程序 获取相册照片实例详解

    微信小程序 获取相册照片实例详解

    这篇文章主要介绍了微信小程序 获取相册照片实例详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • javascript函数式编程基础

    javascript函数式编程基础

    这篇文章主要介绍了javascript函数式编程,文章有介绍函数自核,声明式和命令式代码,感兴趣的小伙伴可以一起来阅读下面我文章内容
    2021-09-09
  • 微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解及实例代码

    这篇文章主要介绍了微信小程序 WXDropDownMenu组件详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • javascript字符串单个字符访问方法

    javascript字符串单个字符访问方法

    这篇文章主要为大家介绍了javascript字符串单个字符访问方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • ajax与302响应代码测试

    ajax与302响应代码测试

    服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起动手写写代码看看实际情况吧。
    2013-10-10
  • 微信小程序 progress组件详解及实例代码

    微信小程序 progress组件详解及实例代码

    这篇文章主要介绍了微信小程序 progress组件详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论