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} ...
随机推荐
- RecoderUtils录音工具类
import android.media.MediaRecorder; import android.os.Environment; import java.io.File; import java. ...
- C# WPF ASP.net 上传多文件和数据
C# WinForm 上传多文件和数据 public static class HttpHelper { private static readonly Encoding DEFAULTENCODE ...
- Oracle动态执行脚本创建序号
-----------------------动态创建序列的脚本--------------------------- declare type num_list ) ); -- 老师表.学生表 xz ...
- Android 单元测试学习计划
网上查了一下Android单元测试相关的知识点,总结了一个学习步骤: 1. 什么是单元测试2. 单元测试正反面: 2.1. 重要性 2.2. 缺陷 2.3. 策略3. 单元测试的基础知识: 3.1. ...
- PhpSpreadSheet 读写excel文件
phpoffice 系列很好用.PhpSpreadSheet取代了原先的phpexcel,用来处理excel文件 https://phpspreadsheet.readthedocs.io/en/la ...
- 酷Q插件_SDK———入门与使用
1.这里使用的是易语言的SDK,所以请看不惯的人自行离开.{wymbf.} 1.2 这里不会直接给你工程,请用动手打代码,动脑思考. 1.3 不知道.不了解酷Q是干嘛的,请访问:https://cqp ...
- 【图像处理与医学图像处理】YUV与RGB格式转换速度几种方法对比
[视频处理]YUV与RGB格式转换 YUV格式具有亮度信息和色彩信息分离的特点,但大多数图像处理操作都是基于RGB格式. 因此当要对图像进行后期处理显示时,需要把YUV格式转换成RGB格式. RGB与 ...
- 拿下id_rsa
ssh配置公私钥远程登录Linux主机 ssh-keygen cat id_rsa.pub >>authorized_keys cat authorized_keys 拿下id_rsa h ...
- Linux下的I/O复用与epoll详解(转载)
Linux下的I/O复用与epoll详解 转载自:https://www.cnblogs.com/lojunren/p/3856290.html 前言 I/O多路复用有很多种实现.在linux上,2 ...
- sysbench压力测试工具简介
一.sysbench压力测试工具简介: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL. ...