angular.js和vue.js中实现函数去抖示例（debounce）

问题描述

搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。

学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

angular.js中解决方案

把去抖函数写成一个service，方便多处调用：

.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
   var timeout;
   // Create a deferred object that will be resolved when we need to
   // actually call the func
   var deferred = $q.defer();
   return function() {
    var context = this, args = arguments;
    var later = function() {
     timeout = null;
     if(!immediate) {
      deferred.resolve(func.apply(context, args));
      deferred = $q.defer();
     }
    };
    var callNow = immediate && !timeout;
    if ( timeout ) {
     $timeout.cancel(timeout);
    }
    timeout = $timeout(later, wait);
    if (callNow) {
     deferred.resolve(func.apply(context,args));
     deferred = $q.defer();
    }
    return deferred.promise;
   };
  };
 }])

调用方法，在需要使用该功能的controller/directive中注入debounce，也要注入$watch,然后：

$scope.$watch('searchText',debounce(function (newV, oldV) {
  console.log(newV, oldV);
  if (newV !== oldV) {
    $scope.getDatas(newV);
  }
}, 350));

大功告成！

Vue.js中的解决方案

首先在公共函数文件中注册debounce

export function debounce(func, delay) {
 let timer

 return function (...args) {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

然后在需要使用的组件中引入debounce，并且在created生命周期内调用：

created() {
 this.$watch('searchText', debounce((newSearchText) => {
  this.getDatas(newSearchText)
 }, 200))
}

大功告成！

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

您可能感兴趣的文章:

  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）
  • 详细分析JS函数去抖和节流
赞 (0)

相关推荐

  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样. 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1.

  • 详细分析JS函数去抖和节流

    本篇内容从节流和去抖的概念基础知识讲起,对JS函数做了详细的分析,一起来看下: 1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一桶水的时候再回来,这个时候,不能把水龙头开的太大,不然还没回来水就已经满了,浪费了好多水,这时候就需要节流,让自己回来的时候水差不多满了.那在JS里有没有这种情况呢,典型的场景是图片懒加载监听页面的scoll事件,或者监

  • angular.js和vue.js中实现函数去抖示例（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间.本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖. angular.js中解决方案 把去抖函数写成一个service,方便多处调用: .factory('debounce', ['$timeout','$q', function($timeou

  • Mock.js在Vue项目中的使用小结

    目录 写在前面 Mock.js 初体验 Mock.js语法规范 1.数据模板定义规范 2.数据占位符定义规范 3.一个实际开发中会用到的案例:生成个人信息 Mock.js在Vue中的使用 1.定义接口路由,在接口中并返回mock模拟的数据 2.在vue.config.js中配置devServer,在before属性中引入接口路由函数 3.使用axios调用该接口,获取数据 如何控制Mock接口的开关? 写在前面 本篇博客收录于我的github前端笔记仓库中,持续更新中,欢迎star~ https

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js

    目录 概述 为什么要选择框架? Vue.js Ember.js Ember.js Vue.js对比 总结 概述 JavaScript最初是为Web应用程序创建的.但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架.它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript. 使用什么类型的框架决定了创建应用程序的便捷程度.因此,您必须慎重选择.在已经足够复杂的前端环境里,其中两个框架脱颖而出.我们会在本文中对Ember.js和Vue.j

  • vue.js出现Vue.js not detected错误的解决方案

    目录 vue.js出现Vue.js not detected Vue.js not detected?与众不同的解决方案 vue.js出现Vue.js not detected 第一:在拓展应用的文件夹中找到文件manifest.json,打开并将此处的false改成true. 第二:在vuejs devtool拓展程序的详情页中开启以下两个选项 如果你看到这,恭喜你,看到全网解决这个问题的方法!!!! 以上都是网上有的,但是会有一个小坑, 让很多人....痛....不....欲....生! 看

  • vue组件中节流函数的失效的原因和解决方法

    今天使用节流函数的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结. 节流函数 浏览器的一些事件,如:resize,scroll,mousemove等.这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕.所以先贤们发明了节流函数,简单版本如下: function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.no

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Python中join函数简单代码示例

    Python中join函数简单代码示例

    本文简述的是string.join(words[, sep]),它的功能是把字符串或者列表,元组等的元素给拼接起来,返回一个字符串,和split()函数与正好相反,看下面的代码理解. 首先展示下结果吧! 代码分享: a=["豫","N","C8","C89"] b=("豫","N","C8","C89") c="zhang" a

  • JavaScript函数节流和函数去抖知识点学习

    概念 节流 (throttle) 让一个函数不要执行的太频繁,减少执行过快的调用,叫节流 去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用,只让其执行一次 throttle 应用场景 DOM 元素的拖拽功能实现(mousemove) 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹) 计算鼠标移动的距离(mousemove) Canvas 模拟画板功能(mousemove 搜索联想(keyup 监听滚动事件判断是否到页面底部自动加载更多:给 scr

随机推荐