首页 > 其他分享 >防抖与节流

防抖与节流

时间:2022-11-09 15:01:19浏览次数:45  
标签:触发 防抖 周期 debounce 事件 节流

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时,有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂,就会导致响应跟不上触发,出现页面卡顿,假死现象。 在实时检查输入时,如果我们绑定onkeyup事件发请求去服务端检查,用户输入过程中,事件的触发频率也会很高,会导致大量的请求发出,响应速度会大大跟不上触发。

针对此类快速连续触发和不可控的高频触发问题,debounce(防抖) 和 throttling(节流) 给出了两种解决策略;

debounce,去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 这是debounce的基本思想,在后期又扩展了前缘debounce,即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。

延迟debounce,示意图:

请输入图片描述

标签:触发,防抖,周期,debounce,事件,节流
From: https://www.cnblogs.com/lifan-fineDay/p/16873682.html

相关文章

  • java--IO流 ☞ 字节流
    IO流概述和分类IO流介绍IO:输入/输出(Input/Output)流:是一种抽象概念,是对数据传输的总称,流的本质是数据传输IO流就是用来处理设备间数据传输问题的。常见的应......
  • 如何理解面向字节流和面向报文
    如何理解面向字节流和面向报文今天看TCP和UDP的区别,发现很多文章讲到TCP是面向字节流,UDP是面向报文的,好奇查了查,这里做个总结为什么UDP是面向报文的协议用户通过UDP......
  • java 字节流写入
    packagecom.tedu.day1201;importjava.io.File;importjava.io.FileOutputStream;publicclassStudy_Fos{publicstaticvoidmain(String[]args){......
  • 防抖和节流
    防抖节流的作用防抖和节流都是用来减少函数执行的频率,已达到项目性能的优化防抖:概念:     事件在触发一定时间后再执行回调,如果在这段时间又被触发了,则重新......
  • JS防抖与节流
    1.概念上的区别防抖:多次执行只有最后一次生效,必要参数[handle,time]节流:一段时间内只能执行一次,必要参数[handle,time]2.实现一下防抖:1functiondebounce......
  • 防抖函数
    函数封装exportconstdebounce=(func,delay)=>{lettimer=nullreturnfunction(...args){if(timer)clearTimeout(timer)timer=setTimeout......
  • React-Hooks怎样封装防抖和节流-面试真题
    Debouncedebounce原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在......
  • java-文件-字节流-3
    packageFile2_Byte_file;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.FileOutputStream;importjava.io.I......
  • vue防抖
     constdebounce=()=>{axios.get('/api/blog/administration/spot').then(res=>{if(res.data.code==200){}else{this.......
  • 防抖--如何讲清楚函数防抖?
    首先函数为什么会抖呢?来列举一个实际的应用场景,例如百度的搜索提示:你可以看到,当你在输入框每输入一个字符的时候百度都会不断的根据当下的输入给予新的提示----那么,如......