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} ...
随机推荐
- JVM菜鸟进阶高手之路一[z]
https://mp.weixin.qq.com/s/qD1LFmsOiqZHD8iZX97OfA? 问题现象 代码如下,使用 ParNew + Serial Old 回收器组合与使用 ParNew ...
- Linux日常用的命令
查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...
- 使用 DrMemory 详细教程
Dr Memory 简介 Dr. Memory 是一个开源免费的内存检测工具,它能够及时发现内存相关的编程错误,比如未初始化访问.内存非法访问以及内存泄露等.它不仅能够在 Linux 下面工作,也能在 ...
- rsync同步脚本
#!/bin/bash export LANG=C date=`date +%Y-%m-%d-%H%M` red=`echo -e "\033[0;31m"` blue=`echo ...
- 安装python3.6并使用virtualenvwrapper管理虚环境
1.安装python3.6.5依赖环境 注:python3.7.4需要安装:yum install libffi-devel -y yum install gcc patch libffi-devel ...
- centos 设置dns
- Ubuntu16.04安装K8s步骤和踩坑记录【不错】
文章目录环境信息安装步骤系统配置修改安装docker安装kubectl,kubelet,kubeadm配置Master配置Node部署结果检查K8S部署mysql学习新建mysql-rc.yaml创建 ...
- LCA cogs 2450 2048 1588
t1 2450距离 链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vSNNNVqga [题目描述] 在一个村子里有N个房子,一些双向的路连接 ...
- 【VS开发】【编程开发】【C/C++开发】结构体中的数组与指针的内存分配情况说明
[VS开发][编程开发][C/C++开发]结构体中的数组与指针的内存分配情况说明 标签:[VS开发] [编程开发] 主要是疑惑在结构体定义的数组的内存空间与指针动态分配的内存空间,在地址上连续性.以及 ...
- 基于vue-cli项目打包慢的定位优化过程
入职一周后,上一个前端就离职了(超级坑爹的),留下了一个比较棘手的问题,就是基于vue-cli的项目打包超级慢,我接手项目的时候,打包需要45min(上个离职者也不知道原因),经过3个月之后,随着项目 ...