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

910 ℃

什么是防抖

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

案例分析:

<!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结合MVVM模型的实现方法

利用vue实现一个图片水平瀑布流效果

运行vue函数提示将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方法

vue-roter路由配置的3种模式介绍

vuejs前端文本对比不同痕迹

标签: vue, 防抖

上面是“vue项目优化之防抖案例分析”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_2212.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

php怎么利用函数获取数组增加值后的最新key
帝国cms方法之网站备份
wordpress如何判断路径是否为可写
js数组实现上一篇下一篇功能
vue项目中如何调用this.$nextTick()方法