首页 > 其他分享 >防抖和节流的介绍及实现

防抖和节流的介绍及实现

时间:2022-08-18 20:55:34浏览次数:55  
标签:function 防抖 节流 timer 介绍 执行 等待 fn

防抖

概述:在规定时间内只执行一次(执行最后一次)

举个例子:电梯关门案例

  • a 进入电梯 等待5s后 就可以上升了

  • 在a等待了4s中后 b过来 那么之前的等待就结束了 开始新的等待

  • 在b等待了3s后 c过来 那么之前的等待也结束了 开始新的等待

  • .... 直到最后一次等待结束 电梯就上升 (实际电梯上升这个操作 只执行一次 是最后一次)

 

 防抖实现

//执行的函数  等待的时间
function debounce(fn,delay){
    var timer = null //记录有没有人在等
    return function(){
        if(timer) clearTimeout(timer) //有人等 上次等待清除
        timer = setTimeout(fn,delay) //开始新的等待
    }
}

示例

let fn = debounce(function(){
    console.log('移进去了');
},500)
//div移进只执行最后一次
document.querySelector('div').onmouseenter = function(){
    fn()
}

节流

概述: 在一定时间范围内 执行第一次 (减少执行次数)

举个例子:高铁上厕所案例
  • 当灯是绿灯的时候 a进去了 这个灯变红灯

  • a 没有执行完的时候 b进不去 只有当a 执行完 把红灯变成绿灯 b才能进去

  • 同样的 c也是一样的

 

 节流代码实现

function throttle(fn,delay){
    var timer = null //默认没有人
    return function(){
        //判断当前是否有人
        if(timer) return //有人不做了 判断节流阀是否开启
        timer = setTimerout(()=>{
            fn()
            timer = null //做完了 将节流阀关闭
        },delay)
    }
}

示例

let fn = throttle(function(){
    console.log('移进去了');
},5000)
document.querySelector('div').onmouseenter = function(){
    fn()
}

 

标签:function,防抖,节流,timer,介绍,执行,等待,fn
From: https://www.cnblogs.com/toweiwei/p/16600087.html

相关文章

  • 闭包节流和防抖
    <style>div{width:200px;height:200px;background-color:skyblue;margin:50pxauto;}</style><div></di......
  • js防抖和节流实现
    1、防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想......
  • 关于!this.IsPostBack 使用介绍
    https://blog.csdn.net/panda_xingfu/article/details/9468695如果我们需要某些代码只需要执行一次,最好的选择当然是放在if(!this.IsPostBack){}里面.如果我们不写......
  • PowerShell教程 - PowerShell介绍(Introduction to PowerShell)
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16589917.html2022年8月18日发布。2022年8月15日从笔记迁移到博客。PowerShell介绍(IntroductiontoP......
  • 介绍this指向问题
     this是js底层定义的变量,代表了代码的指向环境a函数的this是windowb方法的this是调用的对象c构造函数和原型对象上的方法的this指向实例化对象d箭头函数不会自己......
  • git简单介绍
    1.git的四个工作区域Git本地有四个工作区域:工作目录(WorkingDirectory)、暂存区(Stage/Index)、资源库(Reponsitory或GitDirectory)、git仓库(RemoteDirectory) ......
  • 学习:python 第三方模块介绍
    第三方模块是由第三方个人或者组织使用python开发,需要先下载安装才能使用的工具包第三方模块来自各行各业使用python的开发人员为了不同行业的不停业务提供了解决方案 ......
  • Redis介绍与安装
    目录redis介绍安装介绍安装通用命令字符串命令redis介绍安装介绍redis是什么是一个软件(用c语言写的,初级版本代码只有1w多行7.x,公司5.x,4.x多)非关系型(没有外键......
  • 开发工具介绍和小程序简介
    开发工具介绍创建项目后会进入项目开发界面。开发工具提供了小程序的开发、调试和代码提交等功能。从上到下,从左到右依次是菜单栏、工具栏、模拟器、编辑器(调试器需要在......
  • K8S 四种client简单介绍
    K8S四种client简单介绍client-go支持RESTClient、ClientSet、DynamicClient、DiscoveryClient四种客户端与KubernetesApiServer进行交互RESTClient客户端restclient客......