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

  1. //防抖的概念是 当进行连续操作时,只执行最后一次的操作。
  2. function debounce(fn, delayTime) {
  3. let timeout = null;
  4.  
  5. return function () {
  6. if (timeout) {
  7. clearTimeout(timeout);
  8. }
  9.  
  10. timeout = setTimeout(() => {
  11. fn.call(this);
  12. timeout = null;
  13. }, delayTime);
  14. };
  15. }
  16.  
  17. function func() {}
  18.  
  19. debounce(func,200)

2、节流:

节流的概念是在一定时间内,用户没有再次进行此操作,在固定时间范围内只让操作一次。简单的说就是此次操作时间和上次操作时间要大于时间差,时间差的值由用户指定。
实现原理:使用闭包创建私有变量,这个私有变量用来记录上次操作的时间,此次操作时间与这个私有变量的差值如果超过已设置的时间范围差值,则进行次函数调用,否则不进行调用此函数。
 
  1.   function func(){
  2.  
  3. }
  4.  
  5. /**
  6. fn:调用的函数;
  7. timeout:时间差
  8. */
  9. function throlle(fn,timeout){
  10. let time = 0;
  11. return function(){
  12. let time1 = new Date().getTime();
  13. if(time1 - time > timeout){
  14. fn.call(this)
  15. } else {
  16. time = time1
  17. }
  18. }
  19. }
  20. throlle(func,200);
 

【闭包应用】JS:防抖、节流的更多相关文章

  1. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  2. js 防抖 节流 JavaScript

    实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...

  3. js 防抖 节流

    函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能被触发.( ...

  4. js防抖节流

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 防抖函数分为非立即执行版和立即执行版. 非立即执行版: 第一 ...

  5. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  6. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  7. 面试必问题:JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  8. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  9. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  10. 视频直播源码,js实现节流和防抖

    视频直播源码,js实现节流和防抖 防抖: 就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又 ...

随机推荐

  1. CMU15-445 Project3 Query Execution心得

    Project3 Query Execution 心得 一.概述 首先要说:这个 project很有趣很硬核!从这个 project 开始才感觉自己在数据库方面真正成长了! 第一个 project : ...

  2. quarkus实战之八:profile

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<quarkus实战>系列 ...

  3. 并发编程-CompletableFuture解析

    1.CompletableFuture介绍 CompletableFuture对象是JDK1.8版本新引入的类,这个类实现了两个接口,一个是Future接口,一个是CompletionStage接口. ...

  4. Angular报错:Error: Unknown argument: spec

    解决方案 使用--skip-tests代替 效果展示 可以看到spec.ts消失了 参考链接 https://stackoverflow.com/questions/62228834/angular- ...

  5. vlunhub笔记(一)deathnote

    (一)查询靶机ip 通过 arp-scan -l 查询目标靶机ip,查询结果如下图红框所示. (二)信息收集 直接访问目标ip,发现无法访问,只返回网站域名. 网站返回域名,就将该域名添加进hosts ...

  6. 一条命令突破Windows限制,暂定更新时间至3000天

    在系统界面上最长也就只能延期 35 天,而且 35 天以后一定要更新了才能继续暂停.不过,我找到了一段能延长暂停时间的代码 reg add "HKEY_LOCAL_MACHINE\SOFTW ...

  7. jmeter:内存溢出解决办法

    使用jmeter执行性能测试,报错:java.lang.OutOfMemoryError: Java heap space 需要对jmeter的jvm进行调优.记录如下: 1. 问题记录及分析: 使用 ...

  8. mybatis系列: 简介以及使用

    目录 一.简介 二.简单使用 一.简介 MyBatis本质上就是对JDBC的封装,通过MyBatis完成CRUD. MyBatis在三层架构中负责持久层的,属于持久层框架. MyBatis的发展历程: ...

  9. 产品代码都给你看了,可别再说不会DDD(三):战略设计

    这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...

  10. Flutter系列文章-Flutter应用优化

    当涉及到优化 Flutter 应用时,考虑性能.UI 渲染和内存管理是至关重要的.在本篇文章中,我们将通过实例深入讨论这些主题,展示如何通过优化技巧改进你的 Flutter 应用. 代码性能优化 1. ...