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} ...
随机推荐
- 用SQL语句操作Sqlite数据库的示例代码
import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.databa ...
- Android四层体系架构
Application应用层 应用是用Java语言编写的运行在虚拟机上的程序,即图中最上层的蓝色部分.手机的上层应用其实,Google最开始时就在Android系统中捆绑了一些核心应用比如e-mail ...
- Shell脚本中判断字符串是否被包含在内
1.字段 grep:案例: str1="abcdefgh"str2="def"result=$(echo $str1 | grep "${str2}& ...
- 九十四：CMS系统之cms后台登录限制
装饰器,验证当前session中是否存在定义的user_id,没有就重定向到登录页 from flask import session, redirect, url_forfrom functools ...
- vlc 详细使用方法：libvlc_media_add_option 函数中的参数设置
vlc 详细使用方法:libvlc_media_add_option 函数中的参数设置 [转载自]tinyle的专栏 [原文链接地址]http://blog.csdn.net/myaccella/ar ...
- java和delphi共用的des加密解密
java: import antlr.StringUtils;import org.jeecgframework.core.util.StringUtil; import java.security. ...
- 【转】linux下nginx相关操作
参考文章 <nginx启动,重启,关闭命令> 停止操作 停止操作是通过向nginx进程发送信号(什么是信号请参阅linux文 章)来进行的 步骤1:查询nginx主进程号 ps -ef | ...
- python之pip使用技巧
pip 镜像临时使用:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspider永久:直接在user目录中创建一个pip目录:C: ...
- 【VS开发】CTabView多页卡界面
转载地址:http://blog.csdn.net/akof1314/article/details/5618454 目录(?)[-] Public Methods Protected Methods ...
- JavaSE基础（三）--Java基础语法
Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...