防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>淘宝搜索案例</title>
<!-- 导入页面的基本样式 -->
<link rel="stylesheet" href="./css/search.css" />
</head>
<body>
<div class="container">
<!-- Logo -->
<img src="./images/taobao_logo.png" alt="" class="logo" />
<div class="box">
<!-- tab 栏 -->
<div class="tabs">
<div class="tab-active">宝贝</div>
<div>店铺</div>
</div>
<!-- 搜索区域（搜索框和搜索按钮） -->
<div class="search-box">
<input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
搜索
</button>
</div>
<!-- 搜索建议列表 -->
<div id="suggest-list">
<!-- <div class="suggest-item">搜索建议1</div>
<div class="suggest-item">搜索建议2</div>
<div class="suggest-item">搜索建议3</div>
<div class="suggest-item">搜索建议4</div> -->
</div>
</div>
</div>
<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 导入 axios -->
<script src="./lib/axios.js"></script>
<script>
// 请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
// 防抖的本质： 利用setTimeout延时器 在单位事件重新触发事件，清除上一次的事件
let timeID = null
$('.ipt').on('input', function () {
// 清除上一次的事件
clearTimeout(timeID)
let text = $(this).val()
if (text.trim().length === 0) {
$('#suggest-list').empty()
return
}
timeID = setTimeout(function () {
// ajax请求
getSuggestList(text)
}, 500)
})
// 声明获取建议列表的函数
function getSuggestList(kw) {
axios({
// 请求方式
method: 'get',
url: '/api/sug',
params: { q: kw }
// ES6函数解构赋值
}).then(({ data: res }) => {
//成功回调
console.log(res)
let htmlArr = []
res.result.forEach(function (value) {
htmlArr.push(`<div class="suggest-item">${value}</div> `)
});
$('#suggest-list').html(htmlArr.join(''))
});
}
</script>
</body>
</html>
节流
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
<link rel="stylesheet" href="./lib/throttle.css">
</head>
<body>
<!-- 外层的盒子 -->
<div class="box">
<!-- 思聪 -->
<img src="./img/photo.gif" class="photo" alt="">
</div>
<!-- 发射的按钮 -->
<button class="btn btn-primary btn-fire">Fire</button>
<script src="./lib/jquery-v3.6.0.js"></script>
<script>
// 节流的本质:用一个变量来设置状态,这个状态是一个布尔类型的值,true或false
let flag = true
$(function () {
$('.btn-fire').on('click', function () {
if(!flag) return
// 只有true才能执行以下代码，
// 如果动画没有执行完 再次触发事件的话会被return
flag = false
// 1. 动态创建子弹的 DOM 对象
const newBall = $('<img src="./img/bullet.png" class="ball" alt="" />')
// 2. 将子弹添加到页面的盒子中
$('.box').append(newBall)
// 3. 执行动画
newBall.animate({ left: '95%' }, 1000, 'linear', function () {
// 当动画完成之后，移除这个子弹
$(this).remove()
// 只有当子弹发射完了flag才能变为true
flag=true
})
})
})
</script>
</body>
</html>
