[vue]_.debounce-函数

之前想做银行卡每输入4位数字加个空格，方案是监听用户输入然后加空格，或者是输入完了，监听失去焦点再去加空格（当然后者体验不太好），当时想的是用setInterval去做，今天看文档，发现用_.debounce比较nice，_.debounce延迟操作，用的场景也比较多，比如：建议搜索词、图片延迟加载、输入监听请求数据…类似这样的~ 做个笔记（官网案例：https://cn.vuejs.org/v2/guide/computed.html）

<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div><!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion) {this.answer = 'Waiting for you to stop typing...'this.getAnswer()}},methods: {// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，// 请参考：https://lodash.com/docs#debouncegetAnswer: _.debounce(function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = 'Error! Could not reach the API. ' + error})},// 这是我们为判定用户停止输入等待的毫秒数500)}
})
</script>

[vue]_.debounce-函数相关推荐

vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
Vue组件实现函数防抖
最近在掘金看到两篇非常不错的文章: 以vue组件或者插件的形式,实现throttle或者debounce 奇技淫巧 - Vue Mixins 高级组件与 Vue HOC 高阶组件实践这两篇文章中 ...
Vue _ 教程版 02 指令
目录目标一.模板语法 1.1.插值表达式 1.2.指令 1-2-1. v-text 指令 1-2-2. v-html 指令二.常用指令 2.1.v-show 指令 2.2.v-if 指令 2.3 ...
vue之 render函数入门篇
目录 vue之 render函数入门篇简单渲染一个 h1 标签简单渲染一个 ul 与 li 默认插槽与具名插槽 vue之 render函数入门篇 render: function (cre ...
lodash源码中debounce函数分析
lodash源码中debounce函数分析一.使用在lodash中我们可以使用debounce函数来进行防抖和截流,之前我并未仔细注意过,但是不可思议的是,lodash中的防抖节流函数是一个函数两 ...
debounce函数的使用-侦听器debounce的使用
当你的事件在不断触发的时候,会根据你设置的间隔时间只触发一次回调 // const f1= debounce(//你要执行的函数f2 , 500); 当我不断触发键盘事件,如果我触发事件的时间间隔低于 ...
Vue.js 渲染函数 JSX
基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这时你可以用 render 函数,它比 templ ...
MySQL---第07章_单行函数
第07章_单行函数讲师:尚硅谷-宋红康(江湖人称:康师傅) 官网:http://www.atguigu.com 1.显示系统时间(注:日期+时间) SELECT now() FROM DUAL; 2 ...

[vue]_.debounce-函数

[vue]_.debounce-函数相关推荐

最新文章

热门文章