使用setTimeout和clearTimeout取消输入框抖动优化体验

最新推荐文章于 2022-08-01 20:19:02 发布
最新推荐文章于 2022-08-01 20:19:02 发布
阅读量235 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hi_zf/article/details/114551342
版权
本文深入探讨了JavaScript中的setTimeout和clearTimeout函数，它们是实现延迟执行和取消定时任务的关键工具。通过setTimeout，你可以设定代码在指定时间后执行，而clearTimeout则允许你在必要时取消已安排的任务，确保程序的灵活性和可控性。了解这两个函数的工作原理和应用场景，对于提升JavaScript编程技能至关重要。
摘要由CSDN通过智能技术生成

优化前：
在这里插入图片描述

优化后：
在这里插入图片描述
setTimeout是用来延迟代码执行的定时任务，clearTimeout是用来取消setTimeout的定时任务

hi_zf
关注
专栏目录
Taro input输入框之------防抖（性能优化）
weixin_43466871的博客
05-09 3151
Taro的在的onInput方法中如果使用setState来保存value，会导致输入卡顿，原因是用户在输入时，一直在setState 我的解决方案是使用debounce（防抖），事件和函数执行之间加了一个控制层，来控制函数的执行次数。 第一种方法是下载debounce插件 下载 $ npm install debounce 引入 import { debounce } from "debounce"; 使用 <Input className="tc-form-item-text" t
input 输入框 防抖和节流
若把你比作歌
04-30 9880
防抖(debounce): 函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。 <!DOCTYPE html> <head> <meta charset="UTF-8"> </head> <body> 用户名: <input onblur="checkUsername" ...
setTimeout和clearTimeout的用法
weixin_33906657的博客
04-30 309
setTimeout 设置定时器，在一段时间之后执行指定的代码，setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一： window.setTimeout("alert('ok')",5000); 方法二： window.setTimeout(function() {    alert("Ok"); }, 5000); 方法三...
在页面内文本框中按秒针速度显示递加的数字，当循环执行 10 次后，调用 clearTimeout() 方法清除对代码执行
m0_57675124的博客
06-01 141
在页面内的文本框中按秒针速度显示递加的数字，当循环执行 10 次后，会调用 clearTimeout() 方法清除对代码的执行，并弹出提示信息。 https://www.runoob.com/jsref/met-win-cleartimeout.html
16、计时器方法2（setTimeout、clearTimeout、防抖、节流）
weixin_45065754的博客
04-09 677
1、创建计时器(setTimeout) 2、取消计时器(clearTimeout) 3、防抖 4、节流
setTimeout,clearTimeout的一些好用法
weixin_34166472的博客
01-24 379
if(hidden != 1){ $.ui.showMask(); var _aaa = setTimeout(function(){ $.ui.hideMask(); },5000); } //beforeSend,complete有方法但不能用 var url ...
JavaScript之防抖与节流、debounce、clearTimeout、setTimeout、throttle、getElementById
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-07 725
JavaScript之防抖与节流、debounce、clearTimeout、setTimeout、throttle、getElementById
通过实例讲解JS如何防抖动
10-16
JavaScript中的防抖动（Debouncing）是一种优化技术，用于限制函数执行的频率，尤其是在处理高频率触发的事件，如窗口滚动、输入框输入等。防抖动的主要目的是避免在短时间内重复执行函数，减少不必要的计算，提高...
vue3输入框防抖
qq_42868072的博客
08-01 498
vue3输入框防抖
debounce:改进的去抖动实现
05-16
常规的去抖动实现通常使用`setTimeout`来控制执行时间，如下所示： ```javascript function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = arguments; ...
Javascript中setTimeout()和clearTimeout()还有setInterval()用法
01-16 7303
var timeout; timeout = setTimeout(hideResultsNow, 200);   //设定一个延迟时间，时间到了才会执行相应的method clearTimeout(timeout); //使它停下来，这就要用到clearTimeout()。 setInterval("reloop()",1000);  //循环执行指定方法
js中setTimeout和clearTimeout的使用
热门推荐
SundayHugo的专栏
06-01 1万+
一、概念 1、js中可以通过setTimeout函数设置定时器，让指定的代码在指定的时间运动. 如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout()。 2、clearTimeout()用于重置js定时器，如果你希望阻止setTimeout的运行，就可以使用clearTimeout方法。 二、使用场景 1、写计时器 2、需要让程序隔一段时间处理什么事情，
setTimeout和clearTimeout的用法 (转载)
weixin_30849591的博客
12-02 312
原文地址：setTimeout和clearTimeout的用法 setTimeout 设置定时器，在一段时间之后执行指定的代码，setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一： window.setTimeout("alert('ok')",5000); 方法二： window.setTimeout(function() { al...
JS中setTimeout()与clearTimeout()函数的用法
xiaokangmiclong的博客
11-17 2115
1
setTimeout()和clearTimeout用法详解
小太阳的博客
03-22 1万+
setTimeout()是window的方法，该方法用于在指定毫秒数后调用函数或者计算表达式。 我们一般常用的参数是两个，今天发现还有第三个参数 语法如下： setTimeout(code, delay, arg1, arg2, ...) // 不推荐 setTimeout(function() {}, delay, arg1, arg2, ...) 对于code这种方式，你可以使用字符串而不是安全function 的，在delay使用之后编译和执行字符串（使用该语法是不推荐的， 原因和 eval(.
15. Window clearTimeout() 方法
enlyhua的专栏
07-31 690
定义和用法 clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 语法:clearTimeout(id_of_settimeout)实例 下面的例子每秒调用一次 timedCount() 函数。您也可以使用一个按钮来终止这个定时消息：<html> <head> <script type="text/javascript"> var c=0 var
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
weixin_34081595的博客
05-20 683
写在前面： 在js应用中，定时器的作用就是可以设定当到达一个时间来执行一个函数，或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法：setInterval()、setTimeout()、clearInterval()，本文将围绕这三种函数的用法，来实现定时器的功能，需要的朋友可以过来参考下，喜欢的可以点波赞，或者关注一下本人，希望对大家有所帮助。 定时器的应用需求： 1.设定一个时间，当时间...
节流和防抖
tianlei11的博客
05-20 231
节流和防抖 防抖（debounce）节流（throttle）都是用来控制某个函数在一定时间内执行多次的技巧，两者相似但又不同 函数节流：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。 var ids； window.onscroll = function(){ if(ids){ // 判断是否存在函数正在执行，如果在执行中，则直接return return; } ids=setTimeout(function(){ cons
在JavaScript中，定时器的使用与原理
藜笙的博客
05-17 1033
在浏览网页的时候，我们可以看到很多使用定时器实现的动画，例如：轮播动画，实时时钟 ······等。 定时器简单来说就是，根据你想要实现的样式给元素加上延时的效果。 在JavaScript中，对于定时器的实现，有以下两组方法。 setTimeout()和clearTimeout(). setlnterval()和 clearlnterval(). 1.setTimeout() 和 clearTimeout() 在JavaScrip...
js中settimeout和cleartimeout
最新发布
04-11
这是一个关于JavaScript中的setTimeout和clearTimeout的问题。setTimeout是用来在一定时间后执行某个函数的方法，而clearTimeout则是用来取消已经设定的定时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值