js 防抖原理

最新推荐文章于 2023-04-04 09:01:14 发布
最新推荐文章于 2023-04-04 09:01:14 发布
阅读量120 收藏
点赞数 1
分类专栏： js 防抖 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39188726/article/details/120151267
版权 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>

<body>
  <input type="text">
  <button>搜索</button>
  <script>
    //dom查找button元素
    var btn = document.querySelector('button')
    //全局声明变量time
    var time
    //对btn事件进行监听点击事件
    btn.addEventListener("click", () => {
       //首先清除定时器(在设定时器的时候要记得清除)
      clearTimeout(time)
       //设定定时器
      return time = setTimeout(() => {
       //获取input框里的数据
        var val = document.querySelector('input').value
        //console.log(val)
      }, 1000)
    })
  </script>
</body>

</html>

以上是对防抖的理解，如不好请指点谢谢。

逍遥小前端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript防抖函数debounce详解
10-16
防抖函数的基本原理是利用定时器来控制函数的执行。当函数被调用时，它不会立即执行，而是设置一个定时器，如果在设定的时间间隔内函数再次被调用，就会清除原有的定时器并重新设置。只有当最后的一次调用在设定时间...
js防抖和节流的深入讲解
10-17
JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ...
js 防抖 原理
酱子
09-14 5752
一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如： window 的 resize、scroll mousedown、mousemove keyup、keydown input 的 input 事件 二、防抖的原理 答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上 // 第一版 // 缺点：函数的 th
JS函数防抖实现以及原理
AzeShinja的博客
03-22 515
1.防抖 防抖原理： 原理参考楠丶的文章 事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间。可理解为通过setTimeout的方式，在一定时间间隔内，将多次触发转变成一次触发。 应用场景： scroll时间滚动触发 搜索框输入查询 表单验证 按钮提交事件 浏览器窗口缩放 代码实现 可以参考B站Up主： 小野森森 test() { console.log(1); } div.onmouseover = debounce(test); // test 是我们的一
js中的防抖和节流的原理
qq_48959471的博客
03-29 3392
js中防抖和节流的原理，通过代码分析，细节分析
js 防抖
weixin_45727786的博客
07-26 120
js 防抖
JS 防抖与节流的原理分析和代码手写
czjl6886的博客
03-20 3382
目录 前言 作用 防抖 使用场景 分析原理 手写代码 节流 使用场景 原理分析 手写代码 小补充 前言 前一段时间，我学习了 JS 的防抖与节流，自认为掌握住了它们，当我在做面试题的时候，遇到了一道：手写节流，我当时就觉得这题稳了！然鹅，当我结束题目，再去翻看节流的代码时，发现，我磕磕绊绊写出来的，并不是正确答案！！因此，我决定再重新梳理一遍防抖和节流，并记录下来。 作用 对用户短时间内的操作进行限制，避免页面重复渲染， 降低服务器的压力，减少资源消耗，优化性能。 防抖 ..
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
js代码-节流和防抖
07-15
在JavaScript编程中，"节流"（Throttling）和"防抖...在提供的`main.js`文件中，可能包含了这些概念的实现，阅读源码可以进一步了解其内部工作原理。而`README.txt`文件可能包含了关于这些实现的更多解释和使用指南。
javaScript函数节流与防抖之区别
08-11
函数节流（throttle）和函数防抖（debounce）是JavaScript性能优化的重要技巧，它们主要用于处理频繁触发的事件，如窗口滚动、页面加载、输入框输入等场景。 **函数防抖（debounce）** 是一种策略，其主要目的是在...
防抖函数JavaScript（原理分析）
qq_48445738的博客
09-20 277
我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！ 函数防抖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt
js防抖具体实现及详细原理步骤说明（含实例）
unlilalila的博客
03-15 9893
ps：本文将从一个案例出发循序渐进，在其中你不仅能知道防抖是如何实现的，还可以学习到关于 this 、apply、arguments 等知识的具体应用。 Why？为啥要有防抖？ 因为有时候频繁的事件触发是没有意义的，不仅影响性能还可能造成卡顿。 为了避免这种情况，我们需要用防抖来解决这个问题。 What？ 啥是防抖？ 防抖debounce： 简单来说，防抖的效果就是在你连续点击了同一个事件在n秒后，只会触发一次。 How？ 防抖咋用啊？ 首先先从一个实例入手： 我们
面试准备Js复习之防抖，节流函数原理
MeiLuan_yahoho的博客
02-19 726
窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。 防抖 debounce（防抖），简单来说就是防止抖动。 当持续触发事件时，debounce ...
JavaScript实现防抖和节流
weixin_51422386的博客
11-24 2097
JavaScript实现防抖和节流
[JS]防抖和节流
qq_34044224的博客
12-19 403
防抖(Debouncing) 像防抖还是很容易想到的，大概意思就是延时处理，然后如果在这段延时内又触发了事件，则重新开始延时 var t; window.addEventListener('resize',function(){ if(t) clearTimeout(t); t = setTimeout(function(){ console.log(1
js定时器
风火一回，一生不毁
09-02 1473
js有两种专用定时器函数，分别为： 倒计时定时器：var timename = setTimeout("function()",delaytime); 循环定时器：var timename = setInterval("function()",delaytime); 说明：a.其中function()是定时器触发后将要执行的函数，可以是一个函数，也可以是多个函数，多个函数用“;”隔开。
JavaScript防抖功能（js防抖函数，防抖功能的应用与解析，手把手教学）
最新发布
weixin_65793170的博客
04-04 1万+
防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
js的防抖以及节流
xiaoquan1997的博客
08-10 184
js的防抖以及节流
js节流和防抖
似水流年QC的博客
06-29 740
2年前面试腾讯前端就遇到这个题目，谈谈js节流和防抖，现在前端面试中问到的概率也很大，现在去梳理一下，js节流和防抖主要是解决用户重复提交数据和请求数据做的拦截措施，那什么是防抖什么是节流？函数防抖(debounce)：触发高频事件后n秒内函数只执行一次，n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的
javascript防抖
02-01
JavaScript 防抖是一种技术，用于限制在特定时间内连续触发的事件被多次执行。例如，当用户在输入框中连续输入时，可能会触发多次 keyup 事件。如果我们在 keyup 事件中执行了一些复杂的操作，则可能会导致性能问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值