01-loading加载效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>点击获取英雄数据</button>
<br />
<!-- Loading 结构,默认隐藏 -->
<img class="loading" hidden src="./img/loading.gif" alt="" />
<script src="./libs/jquery.min.js"></script>
<script>
$('button').click(() => {
$.ajax({
type: 'get',
url: 'http://127.0.0.1:3001/getStudentsJSONDelay',
success: (res) => {
console.log('请求成功 success', res)
},
beforeSend: () => {
console.log('请求前会自动触发 beforeSend')
$('.loading').show()
},
complete: () => {
console.log('请求完成后自动触发 complete')
$('.loading').hide()
},
})
})
</script>
</body>
</html>
02-防抖优化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>搜索提示效果</h1>
<input class="search-input" type="text" />
<ul id="list"></ul>
<script src="./libs/jquery.js"></script>
<script src="./libs/template-web.js"></script>
<script id="hero" type="text/html">
{{ each list v }}
<li>{{ v.name }}</li>
{{ /each }}
</script>
<script>
let timerId
$('.search-input').keyup(function () {
const str = $(this).val().trim()
if (timerId) clearTimeout(timerId)
timerId = setTimeout(() => {
$.ajax({
type: 'get',
url: 'http://127.0.0.1:3001/getHeroList',
data: { heroName: str },
success: (res) => {
console.log(res)
const htmlStr = template('hero', { list: res.data })
$('#list').html(htmlStr)
},
})
}, 500)
})
</script>
</body>
</html>
03-节流优化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>节流:技能冷却/抢票...-</button>
<script src="./libs/jquery.min.js"></script>
<script>
let timerId = null
$('button').click(function () {
if (timerId) return
timerId = setTimeout(() => {
console.log('放技能/抢票...')
timerId = null
}, 500)
})
</script>
</body>
</html>