目录引言Jquery中JSONP的实现防抖【重要】缓存搜索的列表1 定义全局缓存对象2:将搜索结果存储到缓存对象中3优先从缓存中获取搜索列表节流【重点】防抖和节流的区别引言 协议,域
协议,域名,端口相同,就具有相同的源
同源策略:浏览器提供的一个安全策略
跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互
解决跨域由两种方式:jsONP, CORS
JSONP: 只支持GET请求
通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据
CORS:出现的较晚,是W3C标准,属于跨域ajax请求的根本解决方案,支持GET和POST请求,不兼容低版本的浏览器
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)
})
var cacheObj= {}
// 渲染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)
}
$('#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)
})
})
以上就是JS前端同源策略和跨域及防抖节流详解的详细内容,更多关于JS同源策略跨域防抖节流的资料请关注编程网其它相关文章!
--结束END--
本文标题: JS前端同源策略和跨域及防抖节流详解
本文链接: https://www.lsjlt.com/news/166980.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0