vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

  //节流函数
      throttle(){
        //保持this的指向始终指向vue实例
        var that=this;
        if(!that.statu){
          return;
        }
        that.statu=false;
        setTimeout(function(){
          console.log(new Date());
          that.search();
          that.statu=true;
        },1000)
      },

我们把我们写的节流函数封装在throttle里面执行，把@keyup绑定的点击事件修改为throttle，当用户输入字符的时候触发节流函数；

效果图如下：

我们可以从控制台很清晰的看到当我们使用节流函数的时候，当我们输入了8个字符我们的方法只执行了两次，并且执行时间是每隔一秒执行一次，一个方法执行2次肯定会比执行8次不管是在效率还是在性能方面都会是比较大的提升，用了节流函数之后相对上面没用的节流函数来说，我们极大的实现了性能提升、优化，所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的；

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。