防抖、节流的含义，使用场景？

矫情吗；* 2021-09-08 07:00 266阅读 0赞

**防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间**

**使用场景：**

*  input搜索** **用户在不断输入值时，用防抖来节约请求资源
 *  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

<input type="text" id='inp'>
    
     document.getElementById("inp").addEventListener('input', debounce(myFun, 1000))
    
    
     // 防抖 事件触发后等待一定时间再做处理，等待处理的过程中事件再次触发，重新计算等待时间
       function debounce(fn, time) {
            let timer = null
            return function () {
                clearInterval(timer)
                timer = setTimeout(() => {
                   console.log(this, arguments)
                   fn.apply(this, arguments)
                }, time)
           }
        }
     function myFun(e) {
          console.log(e)
          console.log(e.target.value)
    }

**节流: 就是指连续触发事件但是在 n 秒中只执行一次函数**

**使用场景：**

*  鼠标不断点击触发，mousedown(单位时间内只触发一次)
 *  监听滚动事件，比如是否滑到底部自动加载更多

<button id="btn">按钮</button>
    
    document.getElementById("btn").addEventListener('click', throttle(myFun1, 1000))
    
    
    function myFun1(){
        console.log(1)
    }
    
    //节流 固定时间内多次触发事件，只处理一次
    function throttle(fn, time) {
        let timer = null
           return function () {
               if (!timer) {
                   timer = setTimeout(() => {
                       console.log(this, arguments)
                       fn.apply(this, arguments)
                       timer = null
                   }, time)
               }
           }
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关防抖、节流

原生js中简单实现： function a() { console.log('触发了！！！') } // 节流：规定的时间内

我会带着你远行/ 2023年07月12日 03:34/ 0 赞/ 42 阅读

相关防抖节流

故心故心故心故心小故冲啊 -------------------- 文章目录防抖节流总结 -------------------- 防抖

r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 166 阅读

相关防抖节流

防抖(debounce) 从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们

叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 228 阅读

相关防抖、节流

防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。节流：让用户在一段时间之内，只能执行一次。判断当前的tag，tag是true允许执

╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 222 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 320 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 353 阅读

相关防抖、节流的含义，使用场景？

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间使用场景： input搜索用户在不断输入值时，用防抖来节约请

矫情吗；*/ 2021年09月08日 07:00/ 0 赞/ 267 阅读

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 497 阅读

相关防抖节流

通过闭包返回的函数来进行操作,使得变量一直存在防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 466 阅读

相关防抖节流

vue代码防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){

妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 486 阅读