JS节流防抖

最新推荐文章于 2024-05-01 08:19:11 发布
最新推荐文章于 2024-05-01 08:19:11 发布
阅读量76 收藏
点赞数
分类专栏： 课堂笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55825350/article/details/124087167
版权
节流防抖是为了解决JS事件高频率触发问题而设计的一种方法
节流：一个事件周期内，如果一个事件频繁触发，只运行一次（以次数为限制）
防抖：一个事件周期内，如果一个事件频繁触发，只运行上一个时间周期的一次触发（以时间周期为限制）
*****
节流-例：
<body>
    <h2>节流</h2>
    <span id="count">0</span>
    <button id="btn"type="button">click</button>
</body>
<script>
    var btn document.getElementById("btn");
    var count document.getElementById("count");
    //string Number Boolean(包装类)
    btn.onclick =thowttle(sum,2000)    //    sum-要执行的方法；2000-执行周期
//----正常触发----
    function sum(){
        //count.innerHTML=Number(count.innerHTML)+1
        count.innerHTML= +count.innerHTML+1
    }
//----节流：2000ms内只触发一次----
    function thowttle(callback,delay){
       
var lastTime =0;
return function(){
    var currentTime=new Date().getTime()
    if(currentTime-lastTime >delay){
        callback();
        lastTime=currentTime
    }
}
</script>
*****
防抖
//onchange-表单元素发生变化并失焦时触发
//oninput-表单元素发生变化时触发
<body>
    <h2>防抖</h2>
    <input id="keyword" type="texture">
</body>
<script>
    var keyword=document.getElementById("keyword");
    var timeid=false
    keyword.οninput=function(){
        if(timeid){
            clearTimeout(timeid)
        }
        timeid=setTimeout(()=>{
            console.log(this.value)
        },2000)
    }
</script>
不知道起什么名那就瞎写一个吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript节流防抖
06-09
js节流防抖 $u.throttle(()=>{ // 节流 },1000) $u.debounce(()=>{ // 防抖 },3000)
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS 防抖
YuqiRealm.com
10-27 544
没有防抖：var count = 1; var container = document.getElementById('container');function getUserAction() { container.innerHTML = count++; };container.onmousemove = getUserAction;此时，鼠标移动，getUserAction方法就会频
js 防抖
weixin_45734686的博客
12-28 104
function throttle(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(tim
JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略
最新发布
JINGWHALE
05-01 1018
本文详细介绍了防抖（Debounce）与节流（Throttle）技术的概念、应用场景以及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略。JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖减少连续触发，节流控制执行频率。
js 防抖
不二喵老师
11-12 132
防抖的本质就是将几秒内触发的事件，统一变成最后触发的事件。也可以说就是定时器的维护，一旦在定时器设置的时间内触发相同事件便重置定时器。 // 包装事件的 todo 函数 function todo (func, delay) { // 定义一个timer let timer = null // 返回一个函数，在函数中调用需要触发的func return function () { // 通过 thi
js防抖
OnceTheKing的博客
10-05 239
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> 抖动：<input type="text" id="input"> <scr...
JS防抖
YuqiRealm.com
06-27 419
在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如：1、window 的 resize、scroll 2、mousedown、mousemove 3、keyup、keydown为了解决这样的问题，一般会有两种方案来解决： 防抖和节流（debounce and throttle）本篇将讲述第一种方案：防抖防抖防抖的原理就是，触发事件的回调函数会在事
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
10-14
主要介绍了js节流防抖应用场景,以及在vue中节流防抖的具体实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深入了解JavaScript 防抖和节流
10-16
主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js——防抖
weixin_41246825的博客
03-25 2362
防抖（debounce） 监听一个输入框，文字变化后触发change事件，直接用Keyup事件，则会频繁触发change事件；防抖：用户输入结束或者暂停时，才出发change事件 说在前面： 1）aplly用法详解 2）keyup事件 代码实现： 1：未封装版本 const inputDom = document.getElementById('input') let timer inputDom.addEventListener('keyup', () => { if(timer) {
JavaScript 防抖
ASIA_技术
08-20 277
参考：https://github.com/mqyqingfeng/Blog/issues/22 应用：防抖主要用来解决高频事件短时间高频触发，带来的一系列的bug，全部代码和解释经过验证，结合自己的理解 高频事件： window 的 resize、scroll mousedown、mousemove keyup、keydown demo：主要修改事件绑定的触发函数，一步一步深入理解 ...
JS中的防抖
热门推荐
weixin_49592687的博客
04-20 5万+
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流 防抖: 1. "防抖"是什么 首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。 假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的: <body> <input type="text"> <script>
JavaScript 函数防抖
m0_54829066的博客
12-23 1514
如果每次用户输入都立即触发函数，会导致函数频繁触发，浪费资源。使用防抖函数，可以在用户输入后延迟一段时间才触发函数，从而节省资源。需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。当函数被触发时，防抖函数会延迟执行函数，并且如果在延迟期间内再次触发函数，则会重新计算延迟时间。这样可以避免函数在短时间内多次触发，从而节省资源。JavaScript 函数防抖（debounce）是一种技术，可以防止函数在短时间内多次触发。防抖函数返回一个新函数，在新函数中设置了延迟执行的逻辑。
js 防抖函数
ZhaojunWang的博客
02-15 138
debounce (func, delay) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // this, func.apply(this, args) }, delay) } }
js防抖函数
九段刀客的博客
07-02 4140
单位时间内多次触发只会执行一次 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖函数</title> </head> <body> <button id="btn">点击</butto...
js防抖(debounce) 和 节流(throttling)
morensheng的博客
09-30 232
关于js的防抖和节流 看例子： 当鼠标在橙色区域来回移动时 可以看到数值在不可控的快速增加，说明该函数被频繁触发。 对于这种快速连续触发和不可控的高频率触发问题，我们有 防抖(debounce) 和 节流(throttle) 这两种解决方法。 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 防抖函数分为非立即执行版和立即执行版。 //准备工作 let num = 1;//定义一个初始值 let content
javascript防抖
weixin_35752233的博客
12-20 406
JavaScript 防抖是一种技术，用于限制在特定时间内连续触发的事件被多次执行。例如，当用户在输入框中连续输入时，可能会触发多次 keyup 事件。如果我们在 keyup 事件中执行了一些复杂的操作，则可能会导致性能问题。这时，我们可以使用防抖来解决这个问题。 防抖的原理是在事件触发后，延迟一定的时间执行相应的操作，如果在延迟的时间内又触发了相同的事件，则取消之前延迟的执行，重新开始计时。这样...
js节流防抖
05-24
JS中的节流和防抖是常用的优化性能的方法。它们的主要作用是控制函数的执行次数，从而提高页面的性能和用户体验。 ### 节流 节流（throttle）指的是在一定时间内只执行一次函数，也就是说在一段时间内，不管触发了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值