js防抖和节流函数

最新推荐文章于 2023-04-10 10:05:39 发布
最新推荐文章于 2023-04-10 10:05:39 发布
阅读量196 收藏
点赞数
分类专栏： js 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suuntil/article/details/124361487
版权 
//防抖 
function debounce(fn, delay) {
      var timer = null;
    //   return function () {
    //     if (timer) clearTimeout(timer);
    //     var _this = this;
    //     var _arguments = arguments;
    //     timer = setTimeout(function () {
    //       fn.apply(_this,_arguments);
    //     }, delay);
    //   }
    return (...arg)=>{
        if (timer) clearTimeout(timer);
        timer=setTimeout(()=>{
            fn.apply(this,arg);
        },delay)
    }
    }

//节流 
    function throttle(fn,delay){
        var flag = true;
        // return function (e){
        //     if(flag){
        //         setTimeout(() => {
        //             //到规定时间后执行函数，同时flag=true
        //             fn(this,arguments);
        //             flag = true;
        //         },delay);
        //     }
        //     //防止一直执行
        //     flag = false;
        // };
        return (...args)=>{
            if(flag){
                setTimeout(()=>{
                    fn(this,args);
                    flag=true 
                },delay)
            }
            flag=false 
        }
    }

suuntil
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【进阶篇】js的防抖节流函数
风中追风
10-09 3727
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一、防抖函数 1.1 概念： 　　触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 1.2 使用场景： 　　就像是我的搜索栏功能，是在里面内容变化后就实时触发搜索事件，但是有时候我们输　　的内容很长，在没有输完的时候就触发了事件，这样对性能来说是不好的，造成了很多　...
浅析JavaScript 函数防抖和节流
01-19
函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。 防抖使用场景： 表单输入框校验 提交按钮避免重复提交 节流使用场景： scroll,mousemove,resize等 函数防抖（debounce） 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本，只有当用户停下来一定时间后，这时候默认用户已经输入完毕了可以开始向后台提交文本了。 表单的提交按钮被用户多次连续点击时，显然并不需要每次点击都提交表单。仅在用户不点击之后，把最后一次的点击操作执行即可。 防抖函数的适用场景都有一个共同特点，就是高频触发并不会立即高频的执行，只有
debounce（防抖动函数）- 转载学习
ITMrZhu的博客
03-03 637
短时间内不重复触发一个事件 设置一个门槛值，表示两次 Ajax 通信的最小间隔时间。如果在间隔时间内，发生新的keydown事件，则不触发 Ajax 通信，并且重新开始计时。如果过了指定时间，没有发生新的keydown事件，再将数据发送出去。 这种做法叫做 debounce（防抖动）。假定两次 Ajax 通信的间隔不得小于2500毫秒，上面的代码可以改写成下面这样。 $('textarea').o...
函数节流和函数防抖
weixin_46644037的博客
09-23 107
函数节流：不断触发一个函数后，执行第一次，只有大于设定的执行周期后才会执行第二次 /* 节流函数：fn:要被节流的函数，delay：规定的时间 */ function throttle(fn, delay) { // 记录上一次函数出发的时间 var lastTime = 0 return function () { // 记录当前函数触发的时间 var nowTime = ne
节流与防抖
Mr_Ying的博客
05-24 95
场景举例： 滚动条监听 搜索框实现输入实时搜索 页面resize事件 防抖 触发事件后不立即执行函数，事件触发完后一定时间内没有再次触发该事件则执行函数，否则重新计时。实现短时间内大量触发同一事件只执行一次函数。 function debounce（func，delay）{ delay=delay||300; var timer=null; return function(){ var _self=this; var args=argum
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 3029
一、函数防抖 二、函数节流
js中的函数防抖和函数节流
m0_52900946的博客
05-15 4096
1、什么是函数防抖和函数节流     防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行 1.1 函数防抖 如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.2 函数节流 如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应
js的防抖和节流函数
weixin_43416396的博客
08-11 113
一、防抖（debounce） 1、防抖概念 防抖就是在规定时间内多次触发一个事件，只会执行一次，防止性能浪费和多次触发引起的后端数据异常。 2、应用场景 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖； 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖； 文本编辑器实时保存，当无任何更改操作一秒后进行保存； 当我们在百度搜索时，下方会自动给出相关提示。如果每次用户输入变化都立即查询，那么会造成性能浪费，比如用户想搜索nihao，当用户在输入n
JS防抖和节流（详解）
Zhang_wang_yun的博客
04-10 4110
函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
js函数防抖和节流
前端-卡布达的博客
12-13 860
js 防抖 节流
JS函数节流和防抖之间的区分和实现详解
12-04
在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。 节流概念(Throttle) 按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。 主要应用场景有：scroll、touchmove 防
JS函数节流和函数防抖问题分析
10-18
主要介绍了JS函数节流和函数防抖问题分析，非常不错，具有参考借鉴价值,需要的朋友可以参考下
js防抖函数和节流函数使用场景和实现区别示例分析
10-15
主要介绍了js防抖函数和节流函数使用场景和实现区别,结合实例形式详细分析了js防抖函数和节流函数基本功能、定义、用法区别及操作注意事项,需要的朋友可以参考下
函数的防抖和节流
......
03-29 58
在实际开发中，会遇到一些操作，如浏览器的onresize、mousemove等会频繁触发的事情。为了防止被频繁触发，造成频繁请求服务器的压力。需要限制一下触发的事件。这时候，我们考虑使用防抖和节流来控制触发事件的频次。 1. 函数防抖(debounce) 防抖函数：一个需要频繁触发器函数，在规定事件内，只让最后一次生效，前面的不生效。 代码如下： //html <button id="btn">点击按钮</button> //js fun...
防抖与节流
_web_Z的博客
08-12 107
节流：函数在一段时间内的多次调用，仅第一次有效。 节流就像是一个看门大爷，每一段时间它只会放一个人进去 时间戳版 function throttle(func, delay) { var last = 0; return function () { var now = Date.now(); if (now >= delay + last) { func.apply(this, arguments);
JS防抖函数和节流函数
扛麻袋的少年的博客
07-01 1551
JS 防抖函数和节流函数   在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖 和 节流 是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下： <div id="content" style="height:150px;line-height:150px;t
JS的防抖与节流 -- springboot实战电商项目mall4j
mall4j的博客
04-14 522
JS的防抖与节流 springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j） 什么是防抖？ 函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 什么是节流 **函数节流(throttle): **规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 应用场景 对于函数防抖，有以下几种应用场景： 给按钮加函数防抖防止表单多次提交。
JS函数防抖和节流全解析
青春木鱼的博客
09-10 1494
防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce）和 节流（throttle）的方式来减少调用频率。节流——n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。防抖——n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时.........
js防抖和节流函数封装
最新发布
07-28
防抖和节流是两种常用的函数优化技术，可以用来限制函数的执行频率，提高性能和用户体验。 防抖函数的作用是在短时间内连续触发同一事件时，只执行最后一次操作，而忽略之前的操作。可以用于处理频繁触发的事件，比如窗口大小改变、输入框输入等。 下面是一个简单的防抖函数封装示例： ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` 使用方式示例： ```javascript function handleInput() { // 处理输入事件 } const debouncedHandleInput = debounce(handleInput, 300); // 创建防抖函数 inputElement.addEventListener('input', debouncedHandleInput); // 绑定防抖函数到输入框的输入事件 ``` 节流函数的作用是在一定时间间隔内只执行一次操作，可以用于处理高频率触发的事件，比如滚动事件、鼠标移动事件等。 下面是一个简单的节流函数封装示例： ```javascript function throttle(func, delay) { let timer = null; return function(...args) { if (timer) return; timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); }; } ``` 使用方式示例： ```javascript function handleScroll() { // 处理滚动事件 } const throttledHandleScroll = throttle(handleScroll, 300); // 创建节流函数 window.addEventListener('scroll', throttledHandleScroll); // 绑定节流函数到窗口的滚动事件 ``` 以上是基本的防抖和节流函数封装示例，可以根据实际需求进行调整和扩展。希望能对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值