您的位置：首页 > Web前端 > JavaScript

js实现搜索框的节流与防抖

2019-05-21 11:21 357 查看

js处理搜索框，节流与防抖

节流
防抖
以下是完整示例代码：

在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

节流

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

var timer = null
function input1 () {
clearTimeout(timer)
timer = setTimeout(function () {
// ajax()
console.log(document.getElementById('input1').value)
}, 500)
}

防抖

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

var flg = false
function input2 () {
if (flg) {
return false
}
flg = true
setTimeout(function () {
// ajax()
console.log(document.getElementById('input2').value)
flg = false
}, 500)
}

以下是完整示例代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
抖动示例：<input id='input1' type="text" name="" value="" onkeydown="input1()">
</div>
<div class="">
节流示例：<input id='input2' type="text" name="" value="" onkeydown="input2()">
</div>
</body>
<script>
// 节流
var timer = null
function input1 () {
clearTimeout(timer)
timer = setTimeout(function () {
// ajax()
console.log(document.getElementById('input1').value)
}, 500)
}// 防抖
var flg = false
function input2 () {
if (flg) {
return false
}
flg = true
setTimeout(function () {
// ajax()
console.log(document.getElementById('input2').value)
flg = false
}, 500)
}</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航