防抖截流分析应用

最新推荐文章于 2022-05-29 16:24:12 发布
最新推荐文章于 2022-05-29 16:24:12 发布
阅读量103 收藏
点赞数
分类专栏： 功能 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ceshixiao/article/details/124243572
版权

应用场景：
防抖：滚动
截流：点击、输入

  • 防抖
    index.html
<!DOCTYPE html>
<html lang="en">
<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">
    <script src="./throttle.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 2000px;
            background: linear-gradient(#125,#eae);
        }
    </style>
</head>
<body>
    <h3>throttle节流</h3>
    <script>
        window.addEventListener('scroll',throttle(function(e){
            // console.log(Date.now())
            console.log(e)
        },500))
    </script>
</body>
</html>

throttle.js

function throttle(callback,wait) {
    //定义一个开始时间
    let start = 0;
    //返回结果是一个函数
    return function (e) {
        let now = Date.now()
        if (now - start>=wait) {
            //若满足条件，则执行回调函数
            callback.call(this, e)
            //修改开始时间
            start = now
        }
    }
}
  • 节流
    index.html
<!DOCTYPE html>
<html lang="en">
<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">
    <script src="./debounce.js"></script>
    <title>防抖测试</title>
</head>
<body>
    <input type="text">
    <script>
        let input = document.querySelector('input')
        input.onkeydown =debounce(function(e){
            console.log(e.keyCode);
        },1000)
    </script>
</body>
</html>

debounce.js

function debounce(callback, time) {
    //定时器的变量
    let timeId = null
    //返回一个函数
    return function (e) {
        if (timeId !==null) {
            //清空定时器
            clearTimeout(timeId)
        }
        //启动定时器
        timeId = setTimeout(() => {
            //执行回调
            callback.call(this, e)
            //重置定时器变量
            timeId = null;
        },time)
    }
}
BUG小太阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端防抖截流大揭秘：优化你的网页性能，提升用户体验！
u013558123的博客
05-09 1201
前端防抖截流是一种强大的性能优化技术，它可以帮助我们提高网页性能，减少不必要的计算和资源消耗。通过掌握防抖截流的概念、原理和实际应用，你可以轻松优化你的网页，提升用户体验。随着前端技术的不断发展，防抖截流的应用也将越来越广泛。
防抖和截流
qq_24724109的博客
09-09 1359
JavaScript中的防抖和节流 什么是防抖 什么是节流 防抖节流的区别 应用场景 0. 参考博客 js的防抖截流 为什么要做防抖和节流： 如scroll事件和input中的change事件 等变化频繁的事件，如果我们绑定事件后任由这些事件触发，最后因为频繁出发这些事件，导致性能受到很大影响。 1. 什么是防抖 函数防抖：一段时间内只能发生一次，如果重复触发只执行一次(将多个事件合并为一次进...
防抖(debounce) 和 节流(throttling)
热门推荐
独碟的博客
07-05 14万+
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去...
防抖截流
weixin_42201346的博客
12-28 99
防抖截流转载： https://www.sohu.com/a/251913760_500651
ajax-防抖&节流
weixin_43862991的博客
07-26 764
什么是防抖 防抖策略 (debounce)当事件被触发时，延迟N秒才执行,如果在这N秒内再次被触发将重新计时 好处 能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次 防抖的应用场景 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源； 什么是节流 节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。 节流的应用场景 ① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
防抖与截流
qq_43817972的博客
07-21 695
防抖的定义： 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖debounce的代码 let count = 0; let button = document.ge...
什么是防抖节流
qq_36281882的博客
05-29 1万+
函数防抖，函数节流，核心，区别
函数的防抖和截流
zhzwei的博客
06-25 410
防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。 1. 防抖（debounce） 1.1 什么是防抖 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 1.2 应用场景 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让
防抖和节流
baidu_39009276的博客
03-28 5万+
防抖和节流
防抖 和 节流 详解
小小前端
02-21 4273
防抖（debounce）   当 javascript 中函数触发的频率特别高时，我们需要限制它触发的评率。（好比如我们玩游戏的时候，每次释放完一次技能都会进入冷却时间，这个冷却的机制就是所谓的防抖） 比如：监听浏览器滚动事件，返回当前滚条与顶部的距离 function showTop () { var scrollTop = document.body.scrollTop || doc...
防抖与截流总结
qq_43889848的博客
07-14 2724
//防抖 是指在事件触发结束后延时一段时间再去执行代码，如果在延时期间再次触发该事件，则重新计算延时时间 //第一个参数为事件触发后需要执行的方法，第二个参数为延时时间function debounce(method, delay) { function debounce(method, delay) { let timer = null; return function () { //this 指向调用的他的函数 arguments是调用它的一下属性参数
防抖和截流超级详细讲解，易懂
super帅的博客
04-05 2833
防抖函数： 在规定时间内只执行最后一次 代码解析： // 1、定义一个业务处理函数 function search() { console.log('业务处理函数执行,执行搜索', Math.random()) } // 2、防抖函数（事件触发每次都执行防抖函数，但是不一定执行业务处理函数） // 2.1 防抖函数设置1秒延迟执行业务函数 function fangdou () { setTimeout(search, 1000) } // 2.2、每次事件发生都要触发防抖.
防抖、节流的介绍
Dpl0216的博客
04-23 1万+
针一类类快速连续触发和不可控的高频触发问题，可以用节流和防抖。如通过滚动条的滚动来发起请求、通过输入文字来发起请求这一类的行为，下面用两个例子具体的给大家展示。
前端优化中的防抖与截流
越陌度阡
05-11 1348
1. 什么是防抖？ 在事件触发后的指定时间之后，再去执行真正需要执行的函数，如果在该时间之内事件又被触发，则重新开始计时。 常见的应用场景： 1. 滚动事件触发 2. 搜索框输入查询 3. 表单验证 4. 按钮提交事件 5. 浏览器窗口缩放 以下是代码实现： function debounce(func, time, immediate) { // 用来获取返回值 let timer, result; let debounced = function () {
前端面试准备--手写代码--防抖和节流
m0_61066898的博客
03-12 1697
1、防抖（debounce） 目的：避免用户多次触发事件，导致事件处理程序响应过快而产生抖动感。 实现方法：触发事件时，利用定时器让事件处理程序在一段时间后执行。与此同时，在事件处理程序前若再次触发事件，则取消前一次的定时任务。 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
可以用 javascript 封装一个防抖截流函数吗？
最新发布
04-26
下面是一个用 JavaScript 实现防抖截流函数的示例代码： ```javascript function debounce(fn, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { fn....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值