滚动事件中的函数防抖，函数节流

最新推荐文章于 2024-04-02 23:17:27 发布
最新推荐文章于 2024-04-02 23:17:27 发布
阅读量3.7k 收藏 5
点赞数 1
分类专栏： js

1：滚动事件生效的条件：滚动条在谁身上，谁触发滚动事件
2：函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow-y: scroll;
            margin-top: 50px;
        }

        .scroll {
            height: 5000px;
        }
    </style>
</head>
<body >
<div class="wrap">
    <div id="nothing" class="demo">
        普通滚动
        <div class="scroll"></div>
    </div>
    <div id="throttle" class="demo">
        函数节流
        <div class="scroll"></div>
    </div>
    <div id="debounce" class="demo">
        函数防抖
        <div class="scroll"></div>
    </div>
</div>
<script type="text/javascript">
    // 普通滚动
    // document.getElementById("nothing").onscroll = function(){
    //  console.log("普通滚动");
    // };


    document.getElementById("nothing").addEventListener('scroll', function () {
        console.log("普通滚动456");
    })

    // 函数节流
    var canRun = true;
    document.getElementById("throttle").onscroll = function () {
        if (!canRun) {
            // 判断是否已空闲，如果在执行中，则直接return
            return;
        }

        canRun = false;
        setTimeout(function () {
            console.log("函数节流");
            canRun = true;
        }, 300);
    };

    // 函数防抖
    var timer = false;
    document.getElementById("debounce").onscroll = function () {
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(function () {
            console.log("函数防抖");
        }, 300);
    };
</script>
</body>


</html>

原文：
https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html

陌上浮屠
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scroll 滚动事件节流、requestAnimationFrame、性能优化
Kate_sicheng的博客
07-10 2778
由于滚动事件可以高速触发，因此事件处理程序不应执行计算成本高的操作，例如 DOM 修改。建议使用 requestAnimationFrame来节流，使用AddEventListenerOptions的passive来提供滚屏性能，防止卡顿。
页面滚动事件与节流
dokill的博客
07-28 3847
scrollTop
前端性能优化之防抖与节流，大幅度降低你的事件处理性能
最新发布
2401_84003629的博客
04-02 857
抖，听起来就是一个频繁触发的动作，我们可以想象我们在跑步，每跑一步就出很多的汗，我们跑的过程中，很想拿毛巾擦一擦汗，但是一想，如果刚擦完汗，跑几步就又出汗了，还不如不擦，我看看我等会还跑不跑，如果还跑，那我就一直不擦汗，如果我什么时候不跑了，我就开始擦一下汗。那么‘ 跑步 ’ 这个动作就可以看作我们上述代码中的滚动事件， ’ 擦汗 ’ 就可以看成scroll 事件的处理代码，即获取导航栏离文档顶部的距离。
Vue中对滚动事件使用防抖和节流
weixin_41395548的博客
01-15 1677
在Vue中使用防抖和节流优化 1. utils.js /* 防抖 */ function debounce(func, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(() => { func(...arguments); }, delay);
防抖和节流
weixin_40679578的博客
07-30 381
面试题里经常见到这两个词语：防抖和节流，主要是和性能优化有关系，今天终于用了一次实例： 应用情景：要做一个美颜的功能，当滑动滚动条的时候，可以直接请求接口，实现效果 但是滑动条每次滑动都会触发出很多值变化，可以理解为每次滑动他都请求了好多次接口，这样就会影响性能。除此之外，还有scroll、mousemove等，也是会频繁触发，和这种情况类似。 稍微复杂一点的情况如搜索框input事件，支持实时搜索功能可使用节流方案，每隔一段时间就查询一下搜索内容；页面需要适配用到resize，可使用防抖方案。 解决方
页面优化之高性能滚动scroll（防抖和节流）
RheaWang的博客
07-06 5968
js相对于触发scroll和resize等类事件，触发频次非常高，涉及到大量DOM操作和渲染重绘。会影响用户体验。 页面渲染的原理 一个页面展示，主要经过以下步骤： javascript来实现视觉变化效果 style主要用于匹配CSS样式 layout主要是布局确定每个元素的样式规则，进一步具体计算每个DOM元素最终在屏幕上显示的大小和位置，页面布局是相对的，一个元素变化有可能会联动其他元素的变化
JS函数节流和函数防抖问题分析
10-18
JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。 函数防抖（debounce）的核心思想是...
Vue中函数防抖节流的理解及应用实现
10-15
Vue中的函数防抖和节流是优化性能的重要技术手段，主要应用于处理频繁触发的事件，如输入搜索、滚动、窗口大小调整等。这两者的主要目的是限制函数的执行频率，防止过度消耗系统资源。 **一、函数防抖(debounce)** ...
函数节流和函数防抖（键盘输入完成触发搜索）.rar
06-16
节流保证一段时间内只执行一次核心代码，防抖其实就是搜索功能的实现。。。。滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。同样的，如果不对函数调用的频率加以限制的话，那么...
浅谈JS函数节流防抖
11-28
函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。 函数节流(throttle) 函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。 ...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
防抖节流打包
l_tsov的博客
12-11 639
防抖 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = d.
防抖、节流的介绍
热门推荐
Dpl0216的博客
04-23 1万+
针一类类快速连续触发和不可控的高频触发问题，可以用节流和防抖。如通过滚动条的滚动来发起请求、通过输入文字来发起请求这一类的行为，下面用两个例子具体的给大家展示。
节流的原理及应用
lululu_的博客
06-30 964
虽然持续触发某一事件，但是每隔一段时间，只执行一次你触发事件需要执行的事件响应函数(回调函数)，简单点说，就是我的规矩就是规矩，比如说鼠标移动监听事件，只要鼠标一移动就会执行对应事件响应函数，但是我不是，我就每隔3秒执行一次，不管你在这3秒内触发鼠标移动事件多少次，我就等3秒才执行一次。 上面写的简单实现节流函数是在鼠标一移动时就会执行一次doSomeThing函数，然后在鼠标移动的过程中再每隔3秒执行一次，鼠标一停就不会再执行。 那么我要是想在鼠标移动时第一次不执行doSomeThing函数 防抖与节流.
用节流处理下拉刷新获取新内容刷新多次的问题
qq_55685361的博客
05-25 428
在写这个项目时我发现在滚动事件中符合滚动条件的情况下，由于触发多次滚动条件会出现刷新多次的情况，我使用了节流的的方式解决了这个问题 防抖具体操作如下（下列步骤，和代码内注释相对应，可以方便查看） 在主体盒子的高度<=页面向下滚动的距离加屏幕高度的情况进行判断是否执行（在满足条件时新增数据） 根据 this.ok(默认为true) 判断是否为1秒内第一次执行，如果为true执行下列代码 将 this.ok 设为 fales,下次再触发scroll事件时判断不通过以此阻止代码多次执行 执行新增数据代码
javascript——事件防抖、节流处理
h_jQuery的博客
08-05 1981
防抖 在规定时间内，多次触发一个事件，事件内会执行一个函数。 应用场景：输入框内搜索，输入关键词就会触发搜索事件函数，一直输入一直触发。用防抖，防止连续发送请求，在规定的时间内（如2000ms内），只会触发一次搜索事件，以规定时间内的最后一次触发为准。 按钮多次点击提交，频繁触发提交事件。利用防抖，防止多次提交，在规定时间内，只处理最后一次的提交事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset
JS：性能优化方案：lodash防抖debounce和节流throttle
彭世瑜的博客
08-11 3317
1、防抖函数 防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。 /** * @param {function} func - 执行函数 * @param {number} wait - 等待时间 * @return {function} */ function debounce(func, wait = 300){ let timer = null; return function(){ if(timer !== null){ clearTimeout
JS函数防抖和函数节流及其使用场景
qq_60814347的博客
08-07 315
如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不在工作，直至过了这段时间才重新生效 ， 如在某个时间内(比如500ms)，某个函数只能被触发一次
JS事件的防抖与节流
qq_44165890的博客
09-10 208
当触发鼠标移动事件或是窗口的scroll滚动事件等操作时，事件处理函数会不停的调用，增加浏览器的负担，有可能造成卡顿，为了解决这个问题，可以使用防抖（debounce）和节流（throttle）。 防抖（debounce） 类似与英雄联盟的回城机制。 当触发一个事件后（开始回城），在一段时间内（回城读秒），再次触发此事件（再按b），重新开始计时（重新回城读秒），这段事件内没有再触发事件，则事件才会执行一次（成功回泉水）。 //防抖 const debunce = (func, wait = 0) =>
JS函数防抖和节流的区别
09-04
函数节流常用于限制高频率触发的事件，比如页面滚动时的加载更多功能，用户快速滚动页面时，只会在固定的时间间隔内触发一次加载更多。 总结来说，函数防抖是等待一段时间后执行函数，期间事件还会重新计时，确保...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值