【闭包应用】JS:防抖、节流

1、防抖:当进行连续操作时,只执行最后一次的操作。

复制代码
 //防抖的概念是 当进行连续操作时,只执行最后一次的操作。
    function debounce(fn, delayTime) {
      let timeout = null;

      return function () {
        if (timeout) {
          clearTimeout(timeout);
        }

        timeout = setTimeout(() => {
          fn.call(this);
          timeout = null;
        }, delayTime);
      };
    }

    function func() {}

    debounce(func,200)

2、节流:
节流的概念是在一定时间内,用户没有再次进行此操作,在固定时间范围内只让操作一次。简单的说就是此次操作时间和上次操作时间要大于时间差,时间差的值由用户指定。
实现原理:使用闭包创建私有变量,这个私有变量用来记录上次操作的时间,此次操作时间与这个私有变量的差值如果超过已设置的时间范围差值,则进行次函数调用,否则不进行调用此函数。

复制代码
   function func(){

    }

 
    /**
    fn:调用的函数;
    timeout:时间差
    */
    function throlle(fn,timeout){
      let time = 0;
      return function(){
        let time1 = new Date().getTime();
        if(time1 - time > timeout){
          fn.call(this)
        } else {
          time = time1
        }
      }
    }
    throlle(func,200);
相关推荐
abigale039 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者29 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile33 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399735 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊41 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火41 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能