防抖 & 节流

防抖

防抖(debounce)指的是:频繁触发某个操作时,只执行最后一次。

场景:搜索框只在输入完后,才执行查询的请求。

好处:这样可以有效减少请求的次数,节省网络资源。

<input type="button" value="点击">
let timeId
document.querySelector('input').onclick = function() {
// 清除之前的定时器
clearTimeout(timeId)
// 创建定时器
timeId = setTimeout(function(){
console.log('客户端发送请求...')
console.log('服务端返回数据...')
},1000)

节流

节流(throttle)指的是:单位时间内,频繁触发同一个操作,只会触发 1 次。

let old = 0
document.querySelector('input').onclick = function() {
let now = Date.now()
if(now - old >= 1000){
console.log('客户端发送请求...')
console.log('服务端返回数据...')
old = now
}
}
posted @   丫丫learning  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示