如何理解JS前端同源策略、跨域问题及防抖节流技术？

本文共计1260个文字，预计阅读时间需要6分钟。

目录+引言+jQuery中JSONP的实现+防抖【重要】+缓存搜索结果的列表+定义全局缓存对象+2：将搜索结果存储到缓存对象中+3：优先从缓存中获取搜索列表+节流【重点】+防抖和节流的区别+引言+jQuery中JSONP的实现+防抖+缓存搜索结果列表+定义全局缓存对象+将搜索结果存储到缓存对象中+优先从缓存中获取搜索列表+节流+防抖和节流的区别

目录

• 引言
• jQuery中JSONP的实现
• 防抖
• 缓存搜索的列表
• 1 定义全局缓存对象
• 2:将搜索结果存储到缓存对象中
• 3优先从缓存中获取搜索列表
• 节流
• 防抖和节流的区别

引言

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

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

跨域的出现原因：浏览器的同源策略不允许非同源的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: "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同源策略跨域防抖节流的资料请关注易盾网络其它相关文章！