vue 节流
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"> <input type="text" @input="debounceInput($event)">
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript">
let timeout = null
function debounce(fn, wait) {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
new Vue({
el:'#app',
methods: {
debounceInput(E){
debounce(() => {
console.log(E.target.value)
}, 1000)
}
}
}) </script>
</body>
</html>
扩展：
更为常见用法： 新建一个模块（定时器，状态值： 点击立马执行 - 执行定时器 - 根据状态值 判断是否执行传入函数）
vue 节流的更多相关文章
- Javascript的防抖和节流、VUE的防抖和节流
js原生 函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能 ...
- Vue中使用节流Lodash throttle
在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适 ...
- js节流防抖应用场景，以及在vue中节流防抖的具体实现
故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...
- vue实现输入框的模糊查询（节流函数的应用场景）
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...
- 函数防抖节流的理解及在Vue中的应用
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
- vue 防抖和节流
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时. 函数节流(throttle):当持续触 ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
随机推荐
- spark学习中一些小问题---1
1.linux文件查找命令.这个很关键 find / -name employees.json 2.hdfs命令上传整个文件夹或文件 hadoop dfs -put /home/root/apache ...
- Expecting "jsp:param" standard action with "name" and "value" attributes
浏览器访问报如下jsp标签错误: 根据提示,定位到jsp页面124行,代码如下: 查找原因,当<jsp:include></jsp:include>标签中没有参数时,不允许有空 ...
- Django之权限(起步)
一. 权限概述 1. 认识权限 为什么要有权限? 因为权限让不同的用户拥有不同的功能. 权限可以对功能进行划分. 生活中处处有权限. 比如, 腾讯视频会员才有观看某个最新电影的权限, 你有房间钥匙就有 ...
- 最近忙科研立项 & 对博客的优化
最近一直在忙科研立项.... 立项书 & 答辩 ... 接下来,将对博客进行优化... (1) 依据书来学习的[需要大量截图],将用微软的 OneNote 写笔记,然后打包成pdf,上传到我的 ...
- docker笔记（2）——docker镜像操作
操作环境:mac OS 10.14.6 docker版本:10.03.1 终端:iterm2 3.3 时间:2019年8月 docker 镜像,是运行容器的模板,通过pull操作会向指定仓库获取镜像, ...
- 剑指offer_斐波那契数列
package solution; public class Fibonacci { /* * f(n) = f(n-1) + f(n-2) n>1 * f(0) = 0 * f(1) = 1 ...
- 查找担保圈-step5-比较各组之间的成员，对组的包含性进行查询，具体见程序的注释-版本2
USE [test] GO /****** Object: StoredProcedure [dbo].[p03_get_groupno_e2] Script Date: 2019/7/8 15:01 ...
- Oracle 中 decode 函数用法（字段A，B, C，A不为空则取A，否则取B，B为空则取C）
–decode(条件,值1,返回值1,值2,返回值2,…值n,返回值n,缺省值) SELECT DECODE(TEMP.SCORE, ‘A’, ‘90-100’, ‘B’, ‘80-89’, ‘C’, ...
- Spring的Bean的生命周期（大众版）
距离上一次写Spring源码解析,已经过去了快要好几个月了,主要原因还是Spring的源码解析类文章太难写了,不像我先前写的什么CAS源码,AQS源码,LinkedBlockingQueue等等, ...
- # [洛谷1337] 吊打XXX/平衡点 （模拟退火)
[洛谷1337] 吊打XXX/平衡点 (模拟退火) 题意 n个重物(x,y,w),求平衡时x的位置(x,y) 分析 模拟退火基础题,基于随机数的优化算法,时间复杂度玄学,参数玄学,能不能AC看脸,当然 ...