vue项目优化之防抖案例分析

织梦狗教程前端开发

2025-01-15

什么是防抖？

通俗理解，就是我们在点击请求或者点击加载等过程中，只需要点击一次，但由于请求慢，点击了好多次，导致多次请求，防抖就是在点击了好多次之后的最后一次才会请求。

案例分析：


<!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 内容，请继续关注编程基础学习网。

织梦狗教程

本文标题为：vue项目优化之防抖案例分析