防抖和节流

Chase620
• 阅读 1491

防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件

  • 思路
    每次触发的时候取消之前的延时调用方法,以当下为准
//防抖
function debounce(fn){
    let timeout = null;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            fn.apply(this,arguments);
        },500)
    }
}

function sayHello(){
    console.log("你好,防抖成功");
}

input = document.getElementById('inp')
input.addEventListener('input',debounce(sayHello)) 

但是以上方法的话 是以第一次执行为准,还可以添加判断,控制直接触发还是最后触发

const deb = (fn, delay, immediate) => {
    let timer = null
    return function() { 
        const context = this
        timer && clearTimeout(timer)
        if (immediate) {
            !timer && fn.apply(context, arguments)
        }
        timer = setTimeout(() => {
                       fn.apply(context, arguments)
                }, delay)
    }
} 

节流

触发高频事件后n秒内只执行一次,只有第一次执行结束才会执行第二次,从而稀释函数的执行频率

  • 基本思路 执行之前判断是否有有等待执行的延时函数,有:本次调用不执行,否则执行
//节流
//此方法的弊端 如果是异步函数无法执行
function throttle(fn){
    //通过闭包保存一个标记
    let canRun = true;
    return function(){
        //在函数开头判断标记是否为true,不为true则return
        if(!canRun){return;}
        //进入执行 标志重置为false
        canRun = false;
        setTimeout(()=>{
            fn.apply(this,arguments);
            //函数执行后设置为true 可以继续执行函数
            canRun = true;
        },500)
    }
}
  function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi)); 

本文转自 https://www.jianshu.com/p/ccb6668cef09,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
海军 海军
2年前
浅聊函数防抖与节流
防抖(debounce)所谓防抖,就是指触发事件后n秒后才执行函数,如果在n秒内又触发了事件,则会重新计算函数执行时间。防抖类型分为1.非立即执行版2.立即执行版3.合成版本防抖防抖应用场景登录、发短信等按钮避免用户点击太快,以致于发送了多次请求调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一次到
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
DF系列1、防抖函数,限制高频触发jsconstdebounce(fn,ms0)lettimeoutId;returnfunction(...args)clearTimeout(timeoutId);timeoutIdsetTimeout(()fn.apply(this,args),ms);
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
LinMeng LinMeng
3年前
js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。函数防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
可莉 可莉
2年前
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。!(https://oscimg.oschina.net/oscnet/dc9ed2e656be427d8f3324e57538aa13.png)最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
Stella981 Stella981
2年前
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。!(https://oscimg.oschina.net/oscnet/dc9ed2e656be427d8f3324e57538aa13.png)最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
Stella981 Stella981
2年前
Git提交本地以及远程仓库
项目方法Gc75n047Fm3109gDDPJ2006.07.14101007MpkyG专访抖音绽放公会「分享」运营经验(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fhzcya.com%2Fdywh%2F320.html)00azE2
菜园前端 菜园前端
11个月前
什么是防抖和节流?
原文链接::::tip防抖和节流一般在做用户体验优化的时候会用上。:::什么是防抖?是指一个事件在同一时间内被多次频繁触发后,最终只会执行一次。多次触发后会重新计算时间,只生效最后一次触发。基础案例可通过定时器来实现javascriptvartimer0f