vue使用防抖节流（提交表单、实时搜索）

1、封装防抖节流方法

deTh.js
/*** 闭包函数* * 防抖：对于短时间内连续触发的事件（滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。* 节流：对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效*/export default {// 防抖debounce: function (fn, delay) {// 时间期限var delay = delay || 200;var timer;// 闭包return function () {// 考虑作用域，上下文环境，apply需要用到this对象var th = this;// 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）var args = arguments;// 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时if (timer) {clearTimeout(timer);}timer = setTimeout(function () {timer = null;// 执行方法fn.apply(th, args);}, delay);};},// 节流 定时器 + 时间戳throttle: function(func, delay) {var timer = nullvar startTime = Date.now()return function() {// 结束时间var curTime = Date.now()// 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）var interval = delay - (curTime - startTime)var th = thisvar args = argumentsclearTimeout(timer)if(interval <= 0) {// 证明可以触发了func.apply(th, args)// 重新计算开始时间startTime = Date.now()} else {// 继续等待timer = setTimeout(func, interval)}}}
}

2、组件中引入

test.vue
import handleDt from "../plugin/deTh/deTh";

3、组件中使用(表单提交、实时搜索)

html
<div>9、防抖<button @click="handleDe">防抖（频繁提交表单）</button>
</div>
<div>10、节流<input type="text" @input="handleTh"/>
</div>
js
// 防抖（按钮点击）
handleDe: handleDt.debounce(() => {console.log('不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件')
}, 2000),
// 节流（请求数据的方法）
getData: handleDt.throttle(() => {console.log('第一次请求马上触发，往后不管你怎么触发，我只在5s后请求,5s内触发我要重新计算时间的')
}, 5000),
// 输入框值改变触发
handleTh() {this.getData()
},

逆风的方向，更适合飞翔！

vue使用防抖节流（提交表单、实时搜索）相关推荐

vue --- 提交表单到服务器
<template> <div><textarea v-model='content'></textarea><br/><input ...
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
主要的原因是vue相当于套了一层,界面上的输入框会关联model,提交表单的时候,他是直接提交model的值,而不是传统的输入框里面的值. 所以用这种: let textAreaItem = docu ...
Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...
Vue如何提交表单数据
一.前言之前写React的时候,因为数据是单向绑定,所以提交表单的时候,有一个去获取表单数据的过程.所以在使用Vue的时候还是摸索了很长时间才搞懂Vue的v-model双向数据绑定. 二.例子 (1 ...
vue点击按钮上传图片_关于javascript：Vue-点击按钮提交表单
我有一个组件,用户可以在其中上传图像,我还想添加一个删除图像的功能. 我添加了一个按钮,该按钮可删除当前图像,但是它的问题在于表单也正在提交,因此我想避免这种情况. 我只需要删除当前图像(如果存在). ...
antd提交表单_表单序列化
随着 Ajax 的出现,表单序列化已经成为一种常见需求.在 JavaScript 中,可以利用表单字段的 type 属性,连同 name 和 value 属性一起实现对表单的序列化.在编写代码之前, ...
antd vue中，如何给表单动态添加input，解决遇到一些坑
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细,但也会遇到一些意想不到的问题,最后看文档没办法解决,只能去看源码,折腾了好久,终于把问题给解决了,遇到的问题主要是当添加in ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
ajax如何提交多表单的值_菜狗教程-03-如何解决快速提交两次重复提交表单的问题...
菜狗教程-03-如何解决快速提交两次重复提交表单的问题如何解决快速提交两次重复提交表单的问题? 我在前端和后端分别找到了一种简单实用的方式 vue如何解决快速重复提交表单的问题? (1) 在组件中增 ...

vue使用防抖节流（提交表单、实时搜索）

1、封装防抖节流方法

2、组件中引入

3、组件中使用(表单提交、实时搜索)

vue使用防抖节流（提交表单、实时搜索）相关推荐

最新文章

热门文章