uni-app VUE 防抖函数(可立即执行)

实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示) 【代码】实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示) 阅读详情
//防抖
/**
 * @param {Function()} = fn //要执行的函数
 * @param {number} = delay  //防抖间隔
 * @param {this} = th //vue实例的this
 * @param {boolean} = immediate //第一次触发是否立即执行
 */
var util ={}
util._debounce = function(fn, delay,th,immediate = false) {
	var delay = delay || 300;
	return (function() {
		if (th.timer) clearTimeout(th.timer)
		if (immediate && !th.isImmediate) {
			fn.apply(th)
			th.isImmediate = true
		}else{
			th.timer = setTimeout(function() {
				th.timer = null;
				th.isImmediate = false
				fn.apply(th);
			}, delay);
		}	
	})()
}
export default util

使用:

先全局挂载实例

//加入防抖之前
showTips(a){
	console.log(a)
},
//加入防抖之后
showTips(a) {
	this.$util._debounce(()=>{
		console.log(a)
	},300,this,true)
}

 

【VUE3 + uni-app】防抖组件、节流组件 实现防抖功能,防止用户快速多次点击。延迟时间自己设置,以最后一次点击为准。只支持vue3的setup语法糖。实现节流功能,防止用户快速多次点击。延迟时间自己设置,以第一次点击为准。只支持vue3的setup语法糖。在工程的components目录下创建名字为。在工程的components目录下创建名字为。的目录,在该目录中创建。的目录,在该目录中创建。组件页面,下载源码. 阅读详情

相关推荐

ZKmall开源商城的移动商城搭建:Uni-app+Vue3 实现多端购物体验

ZKmall开源商城用了 Uni-app 加 Vue3 的组合,一套代码能同时跑在 iOS、Android、微信小程序、支付宝小程序这些平台上,既省了功夫,又保证了用户不管在哪种设备上逛,体验都差不多。这背后可不是简单的代码复制,而是一套精巧的多端适配技术和业务逻辑设计。

1655

uni-app 实现节流与防抖

提示:这次要讲的前端关于节流和防抖 文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 一、什么是防抖? 防抖是指在频繁触发某一个事件时,一段时间内或者一定条件下不再触发该事件对应调用的函数。 二、防抖代码 1.示例:防止按钮多次连续点击 代码如下(示例): <template> <view> <view style="margin-top:80rpx;"> &lt...

weixin_54904917的博客 1万+

uni-app - 节流与防抖(按钮节流、输入框防抖解决方案)

uni-app - 节流与防抖(按钮节流、输入框防抖解决方案),uniapp js 按钮 点击事件 防抖节流 防抖和节流事件的触发,Vue.js uni-app 实现节流与防抖,防抖节流的区别和使用场景,前端什么是节流与防抖,uniapp项目中使用防抖及节流一种方案,uniapp 输入框防抖节流_防抖、节流。

🏆 前端领域优质创作者 6693

uniapp中防抖函数debounce的使用

分段控件u-subsection每次点击一个tab的时候都会ajax访问一次接口取列表数据的,这时如果有人快速在多个分段间快速点击的话,每次点击都会访问接口的,网上找了好多资料,终于找到了这个玩意。记得以前也弄过这个的。不过当时没有记下来,现在记下来,以做备用。common/js目录下建立debounce.js文件。uniapp中防抖函数debounce的使用。

牛腩的专栏 1721

别再用UE5默认材质:用Substance Painter一招提升写实感

今天,我就把这套从模型准备到引擎最终呈现的全流程技巧毫无保留地分享出来,这套方法不仅能让你的作品细节炸裂,更能让你理解次世代PBR(Physically Based Rendering)材质的底层逻辑。

海外旅居设计师,15年设计经验。 1325

解决usbisp不识别无法烧录Atmega328P,Arduino不识别问题

如果使用Arduino IDE里面的烧录,可能会遇到一个问题,就是不识别国产这种廉价的USBISP 点击烧录引导程序,会遭遇到找不到USB设备的问题,选哪个都会提示找不到,比如选择USBasp could not find USB device with vid=0x16c0 pid=0x5dc vendor='www.fischl.de' product='USBasp' 因此,我们需要使用到progisp这一个软件的1.72版本 选择好芯片的型号后,调用编译好的HEX文...

arenascat的博客 7436

uni-app 简单实现防抖和节流

uni-app 简单实现防抖和节流

不甜呐的博客 3689

保姆级教程:在通达信V7.611上配置欧奈尔RPS曲线(附完整公式与每日更新流程)

本文提供通达信V7.611配置欧奈尔RPS曲线的保姆级教程,涵盖从环境准备、基础设置到核心公式配置的全流程。详细讲解如何创建股票池、编写EXTRS基础公式及RPS显示公式,并附每日更新流程与实战应用技巧,帮助投资者精准捕捉强势股。

weixin_30000735的博客 464

uni-app 封装防抖函数 -- 防止按钮多次点击多次触发事件

防抖是指当触发一个事件不会立即执行,会等待 n 秒后再执行该事件,如果在等待 n 秒期间你再次出发,则会重新计时,也就是说防抖不管你触发多少次这个事件,永远只有一次在执行,并且执行的是最后一次。登录、发短信 支付 等点击事件 如果遇上网速过慢的情况 用户会重复狂点 导致请求多次 所以需要用到防抖。点击事件 @click="$noMultipleClicks(点击事件)"@click="$noMultipleClicks(点击事件(参数))"在data中挂载 noClick:true,否则点击会失效。

weixin_62312817的博客 2686

ShardingSphere-JDBC-若依框架集成(SpringBoot)

ShardingSphere基础知识、ShardingSphere-JDBC如何集成进若依框架中 使用的是若依框架前后端版本、动态数据源,可自行切换,默认数据源为达梦8代理端,

编程小菜鸟的笔记 8168

为什么你的SiC MOSFET仿真不准?可能是离子注入的‘沟道效应’在捣鬼(Silvaco BCA模块详解)

本文深入分析了SiC MOSFET仿真中离子注入沟道效应的关键影响,揭示了Silvaco BCA模块在模拟SiC晶向和角度参数时的核心设置要点。通过详细解析晶圆偏切与注入角度的等效关系,提供优化MOSFET沟道区注入仿真的五步实战方法,帮助工程师将阈值电压仿真误差从26%降低到5%以内。

weixin_26789847的博客 410

UNI-APP使用了防抖函数debounce来处理收藏按钮的点击事件

这段代码使用了防抖函数debounce来处理收藏按钮的点击事件,在点击收藏按钮时会发送一个POST请求到指定的接口地址,并根据返回的结果做相应的处理,最后通过setTimeout重新渲染数据。这段代码在Uni-App中的确可以发挥作用,但有一些地方可以进行优化和改进。 首先,确保在Vue或Uni-App的组件中正确引入和使用防抖函数。你可以在export default之前定义debounce函数,这样它就可以在整个组件中被使用。 其次,建议对debounce函数进行一些改进,比如增加一个立即执行的选项

码海扬帆:前端探索之旅的博客 654

lattice Diamond Programmer程序下载

Lattice Diamond Programmer(支持Lattice FPGA与CPLD程序下载)

qq_44385725的博客 5178

uni-app中使用lodash_什么,lodash 的防抖失效了?

作者:yeyan1996https://juejin.im/post/6892577964458770445应某人的要求被迫营业,望各位看官不要吝啬手中的赞-。-背景在使用 uni-app 开发小程序时,有个填写表单的需求,包含两个输入框,看起来像这样image-20201107143814796两个在普通不过的输入框因为需要复用一些样式和逻辑,所以将输入框抽象成了组件,代码简化后如下子...

weixin_39585974的博客 898

基于Jeecgboot3.9.0的vue3版本前后端分离的flowable流程管理平台

基于Jeecgboot3.9.0的vue3版本前后端分离的flowable流程管理平台

宁波阿成的博客 902

手把手教你学Simulink——基于Simulink的多轮PMSM同步驱动交叉耦合控制

摘要:本文针对多轮PMSM同步驱动系统的负载不均、参数差异等问题,提出基于Simulink的交叉耦合控制解决方案。通过实时补偿轮间同步误差,实现同步误差<1%、转矩脉动<5%的性能提升。文章详细介绍了系统架构、核心算法(包括PMSM数学模型和偏差耦合控制算法)、Simulink建模步骤及参数设置,并通过仿真验证了稳态和动态性能。同时提供了工程调试建议和完整代码实现,为多轮驱动系统开发提供实用参考。该方案计算量小,可移植性强,适用于电动汽车、AGV等应用场景。

MHD0815的博客 140

深入js之什么是函数的防抖?

防抖 一直对防抖和节流傻傻分不清楚,看了也总是忘记,直到项目中遇到了,才彻底搞清楚。 什么是防抖? 防抖就是当你触发了一个事件,这个事件就会被执行,你又不想这个事件频繁的被执行,所以就可以设置间隔时间,让事件被触发,但是过一定时间在执行。 开发应用场景: 在使用uni-app开发小程序的时候,我需要实现一个搜索框的搜索联想功能,那么当用户输入内容时候,需要实时对后端请求接口,如果不设置防抖,每输入一个文字,都会发起一次请求,这样太消耗性能了;如图: 输入了6次a,那么不设置防抖就会请求6次。 如果

weixin_42282727的博客 293

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

什么,lodash 的防抖失效了?

背景在使用 uni-app 开发小程序时,有个填写表单的需求,包含两个输入框,看起来像这样image-20201107143814796两个在普通不过的输入框因为需要复用一些样式和逻辑,...

小生方勤 1157

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

使用lodash防抖_什么,lodash 的防抖失效了?

戳蓝字「前端技术优选」关注我们哦!作者:yeyan1996https://juejin.im/post/6892577964458770445应某人的要求被迫营业,望各位看官不要吝啬手中的赞-。-背景在使用 uni-app 开发小程序时,有个填写表单的需求,包含两个输入框,看起来像这样image-20201107143814796两个在普通不过的输入框因为需要复用一些样式和逻辑,所...

weixin_42594419的博客 600

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

uni-app最全基础知识

服务器通过这个加密字符串识别用户,找到其信息,从而进一步查询更多信息服务用户.——类似于银行给客户端的“银行卡”,其中存储着客户端的信息(加密存储,客户端是读不懂的),后续有些请求需要客户端出示此“银行卡”有些请求则不需要。设法让父组件因为使用scoped属性产生的data-v-随机数 属性在所有的子组件体内元素上也生成一份,这样一来父组件的样式就可以应用到子组件内 —— 样式穿透:让父组件内编写的样式可以作用到子组件内。Vue.js / uni-app经典面试题:scoped属性的原理是什么?

是程序喵呀 1628

前端如何实现请求防抖

前端实现请求防抖 前言:最近做一个uni-app的h5项目,实现一个购物车商品数量加减发送请求时候,发现快速点击会发送多个请求给后端,直接导致整个页面在服务请求加载。 我需要解决这个问题,实现只发送最后一次请求,然后本作者就想到了 →防抖 1. 调试问题 本人去网上看了大多的防抖函数,都没能实现我想要的请求功能。本人请求函数用Promise,我发现大多在封装的防抖函数都是return返回一个函数包裹着定时器,导致我的请求并没有执行! 比如这种防抖代码(是不成功的) function debounce(f

凌晨冲锋者的博客 2582

uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u

项目引入了uview,并将uview所有模块指给uniapp全局变量uni。

LlanyW的专栏 1万+

uni-crazy-router:uni-app 的原生路由插件

uni-crazy-router:uni-app 的原生路由插件 uni-crazy-router 是一款专门为 uni-app 开发的原生路由插件,它使用 uni-app 原生钩子和方法,抛弃了 vue-router 的影子,为开发者提供了一种更加贴合 uni-app 的路由解决方案。 项目介绍 uni-crazy-router 是一款轻量级的路由插件,它完全使用 uni-app 自身的钩子和属...

gitblog_01186的博客 629

《uni-app》uni-app实现疯狂点赞效果(一)

现在很多app尤其是直播类、视频类甚至是社交类的,基本都是带有 "点赞功能",其中有一部分app的点赞功能甚至可以被称为是 疯狂点赞,大量的爱心漂浮功能感觉非常有意思,忍不住尝试一下其实现~当然本文的实现仅仅是demo级别的,下一篇我们再进一步做优化,本文先用CSS实现效果再说~

Oliver尹的博客 4421

uni-app项目笔记

1. npm init -y 初始化package.json文件夹 由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。 请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用 官方文档:https://www.npmjs.com/package/@escoo

LM的博客 2218

uni-app点击按钮防抖,防重复操作

在根目录下新建common文件并创建common.js文件,代码如下 // 防止处理多次点击 function noMultipleClicks(methods, info) { // methods是需要点击后需要执行的函数, info是点击需要传的参数 let that = this; if (that.noClick) { // 第一次点击 that.noClick= false; if(info && inf

前端小白成长记 2806
上一篇: json串中的双引号变成&quot;该如何解决
lonelycodebuilder
博客等级 码龄5年 0粉丝 2原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值