JS 节流和防抖 前端面试必问
程序员文章站
2022-06-09 21:39:03
...
何时使用节流法和防抖法？
1.当我们在搜索商品的时候每次输入内容都要进行查询很浪费资源。这个时候比较适合防抖法，因为防抖法只要你在规定的时间内的最后一次内容。
比如吧： 公交车 按照规定 只能在 一个站盘没有乘客上车的情况下等待10秒。如果在10秒内有乘客上车则重新等待10秒钟，依次类推直到10内没人上车。大概就是这个意思。
我感觉吧 就是一个防抖技术 没有必要抽离出太多的东西 实现了就行没有那么麻烦 建议时间设置为（小于等于 800 秒 可以少不建议多）
<!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>
</head>
<body>
<input type="text">
</body>
</html>
<script>
let input = document.querySelector('input')
var timer = null
input.addEventListener('keyup', function (e) {
clearTimeout(timer)
timer = setTimeout(() => {
console.log(e.target.value); //在这个里面发送请求 当然也可以抽离出来
}, 800) //子规定时间
})
///------------------------像这样抽离出来也可以
let input = document.querySelector('input')
var timer = null
input.addEventListener('keyup', function (e) {
clearTimeout(timer)
timer = setTimeout(() => {
ajax(e.target.value)
}, 800)
})
function ajax(content) {
console.log(content);
}
</script>
节流法 这个比较适合 页面的滑动 或者 鼠标特效 比如鼠标跟着一个动态星星图 一直不停的动 因为节流法 是有固定时间的 （建议短时间）在你定时间内才出发。自我感觉不适合input内容
比如：你们村村长 规定 9点 以后没得水喝 ，你是村霸也不中。村长把阀门给关闭了 。规定早上8点才有水喝。带有阀门和固定时间的事件函数。
<!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>
</head>
<body>
<!-- lodash.js _.throttle节流 _.debounce -->
<input type="text" id='throttle' />
</body>
</html>
<script>
let input = document.querySelector('input')
var flag = true
input.addEventListener('keyup', function (e) {
if (flag) {
flag = false
console.log(e.target.value);
setTimeout(() => {
flag = true
}, 800)
}
})
</script>
高超的技术总是有大佬帮我封装好各种js 节流和防抖那必然是有的！
lodash.js 这是官网地址
嫌麻烦的可以做值下载
链接：https://pan.baidu.com/s/1UfGur_jxZxH0B5q77d56ng
提取码：1234
复制这段内容后打开百度网盘手机App，操作更方便哦
1.0如何只是不同的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>
</head>
<body>
<!-- lodash.js _.throttle节流 _.debounce -->
<input type="text" id='throttle' />
</body>
<script src="../lodash.js"></script>
</html>
<script>
let input = document.querySelector('input')
var flag = true
//这是规定的 不建议使用input哈 我只是做个例子
input.addEventListener('keyup', _.debounce(function (e) {
//节流 _.throttle 防抖_.debounce
if (flag) {
flag = false
console.log(e.target.value);
setTimeout(() => {
flag = true
}, 800)
}
}))
</script>
至于 vue 中使用嘛 LOOK：
$ npm i -g npm
$ npm i --save lodash
//如需在 Node.js < 6 的 REPL 环境中使用 Lodash，请安装 n_。
import throttle from 'lodash/throttle' // 局部引用
import _ from "lodash"
// 全局引用，下方的throttle改成_.throttle即可
//( 也可再main.js中挂载在vue的prototype中，
//页面组件中通过this._.throttle进行调用)
export default{
methods:{
click: throttle(function(){
console.log('OK')
},800)
}
}