vue项目优化之防抖案例分析
什么是防抖?
通俗理解,就是我们在点击请求或者点击加载等过程中,只需要点击一次,但由于请求慢,点击了好多次,导致多次请求,防抖就是在点击了好多次之后的最后一次才会请求。
案例分析:
<!DOCTYPE html>
<html>
<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>vue项目优化之防抖案例分析</title>
<script src="/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
输入内容:<input type="text" @keyup="deb"/>
<div> 输入次数:{{num}}</div>
</div>
<script>
let time
var app=new Vue({
el:'#app',
data:{
num:0,
},
methods:{
deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('输入了'+that.num+'次')
time = undefined;
}, 2000)
}
}
})
</script>
</body>
</html>
以上是编程学习网小编为您介绍的“vue项目优化之防抖案例分析”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。