JavaScript防抖与节流详解

JavaScript防抖与节流详解

前言

在Web开发中,我们经常需要对用户的操作进行响应,比如防止用户频繁点击按钮或滚动页面。而JavaScript中通过防抖和节流两种方式来解决这个问题。防抖和节流的核心思想都是通过控制函数的执行次数来达到节省性能的效果,但两者的实现方式略有不同。

防抖

防抖的原理是将多次执行变成最后一次执行,也就是在用户停止操作一段时间后才会开始执行相应的函数。这样可以避免短时间内重复触发函数,导致资源浪费。常见应用场景包括:

  • 输入框实时搜索(避免连续输入触发多次搜索)
  • 窗口大小改变(避免不断改变窗口大小造成频繁的页面渲染)
  • 鼠标移动(避免频繁触发事件)

示例一:搜索框实时搜索

在这个示例中,我们通过防抖的方式来实现输入框搜索功能,当用户在5秒内连续输入时不会触发搜索,只有在5秒之后没有输入时才会触发搜索操作。

// 防抖函数,func为要执行的函数,delay为等待计时时间
function debounce(func, delay) {
  let timer

  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

// 输入框实时搜索示例
const input = document.querySelector('#search')
const search = query => console.log(`Search with query: ${query}`)

input.addEventListener('input', debounce(function() {
  search(this.value)
}, 5000))

示例二:滚动页面时隐藏和显示导航栏

在这个示例中,我们通过防抖的方式来实现滚动页面时导航栏自动隐藏和显示的效果,在用户连续滚动时不会频繁触发事件,只有在停止滚动一段时间后才会触发事件。

// 导航栏自动隐藏和显示示例
const navbar = document.querySelector('#navbar')
let prevScrollPos = window.pageYOffset
window.addEventListener('scroll', debounce(function() {
  const currentScrollPos = window.pageYOffset
  if (prevScrollPos > currentScrollPos) {
    navbar.style.top = "0"
  } else {
    navbar.style.top = "-50px"
  }
  prevScrollPos = currentScrollPos
}, 100))

节流

节流的原理是将多次执行变成每隔一段时间执行一次,也就是当一个函数正在被执行时,不管执行多少次,只在规定的时间间隔内执行一次。常见应用场景包括:

  • 滚动页面(避免频繁触发事件)
  • 监听窗口大小改变事件(避免频繁渲染)

示例一:滚动页面懒加载图片

在这个示例中,我们通过节流的方式来实现滚动页面时图片的懒加载,当用户滚动到一定位置时,才会加载对应的图片。节流的时间间隔为100ms,每100ms才会触发一次滚动事件。

// 懒加载图片示例
const images = document.querySelectorAll('img[data-src]')

function lazyLoad() {
  const scrollTop = window.pageYOffset
  const windowHeight = window.innerHeight

  images.forEach(image => {
    const top = image.getBoundingClientRect().top
    const src = image.getAttribute('data-src')
    if (top < windowHeight && top > 0) {
      image.setAttribute('src', src)
      image.removeAttribute('data-src')
    }
  })
}

window.addEventListener('scroll', throttle(lazyLoad, 100))

示例二:监听窗口大小改变事件

在这个示例中,我们通过节流的方式来监听窗口大小改变事件,每隔500ms执行一次函数,避免频繁触发window.resize事件。

// 监听窗口大小改变事件示例
function handleResize() {
  console.log(`Window width: ${window.innerWidth}, height: ${window.innerHeight}`)
}

window.addEventListener('resize', throttle(handleResize, 500))

结语

以上就是JavaScript防抖和节流的详解,防抖和节流的实现方式各有不同,开发者根据具体需求选择合适的方法可以提升页面性能,优化用户体验。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript防抖与节流详解 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript实现获取img的原始尺寸的方法详解

    我来详细讲解“JavaScript实现获取img的原始尺寸的方法详解”的完整攻略。 一、背景说明 在开发网页中,经常需要获取 img 标签的原始尺寸,以便进行响应式布局或者图片的合理展示。对于这种需求,我们可以使用 JavaScript 来获取 img 标签的原始尺寸,本文将介绍几种实现方式。 二、addEventListener 方法 addEventLi…

    JavaScript 2023年6月11日
    00
  • Javascript中replace()小结

    当我们在Javascript中需要进行字符串的替换操作时,可以使用字符串内置的replace()方法。replace()方法接受两个参数,第一个参数是要替换的字符串或正则表达式,第二个参数是用于替换的新字符串。 下面是replace()的基本语法: string.replace(searchvalue, newvalue) 其中: searchvalue:要…

    JavaScript 2023年5月28日
    00
  • JavaScript日期对象(Date)基本用法示例

    来了解一下JavaScript日期对象(Date)的基本用法吧! 什么是JavaScript日期对象(Date) JavaScript日期对象(Date)是JavaScript内置对象,用于处理与日期和时间相关的信息。我们可以使用JavaScript日期对象(Date)来获取当前时间、日期、计算时间间隔、格式化日期时间等。 创建JavaScript日期对象(…

    JavaScript 2023年5月27日
    00
  • JS中两个数组对象筛选方法

    下面是JS中两个数组对象筛选方法的完整攻略。 一、筛选方法介绍 在JS中,我们经常需要对数组对象进行筛选。常见的筛选方法有filter和find。 1. filter filter方法可以对数组对象进行筛选,并返回一个新的数组,新数组中包含符合条件的元素。 const arr = [1, 2, 3, 4, 5]; const newArr = arr.fil…

    JavaScript 2023年5月27日
    00
  • JavaScript中的模拟事件和自定义事件实例分析

    让我为您详细讲解“JavaScript中的模拟事件和自定义事件实例分析”的完整攻略。 什么是模拟事件? 模拟事件是指在JavaScript中指定对元素执行的事件,并手动触发该事件的操作。模拟事件非常有用,可以用于测试或模拟用户交互。 在JavaScript中,可以使用new Event()、new MouseEvent()等构造函数,来创建事件对象。可以使用…

    JavaScript 2023年6月10日
    00
  • 在JavaScript中如何解决用execCommand(

    在JavaScript中,可以使用execCommand()方法来执行一些富文本编辑操作,如加粗、斜体、插入链接等。下面是一些解决execCommand()的方法以及示例说明。 方法一:使用document.execCommand() 使用document.execCommand()方法可以直接执行一些富文本编辑操作,如下示例代码演示了如何在文本框中插入一段…

    JavaScript 2023年6月11日
    00
  • 原生JS实现前端本地文件上传

    当我们需要在前端实现文件上传的功能时,可以使用原生的JavaScript代码来实现。下面是一个完整的攻略,包含了前端上传文件需要用到的一些知识点。 1. 获取文件上传的节点 要上传文件,需要在页面上放置一个文件上传的节点,通常使用HTML中的<input type=”file” />元素。获取节点的方式可以使用原生JavaScript中的 get…

    JavaScript 2023年5月27日
    00
  • 深入理解JavaScript作用域和作用域链

    关于“深入理解JavaScript作用域和作用域链”的完整攻略,我会从以下四个方面进行详细讲解: 什么是JavaScript作用域 JavaScript作用域的类型 作用域链的产生和工作原理 示例说明 1. 什么是JavaScript作用域 作用域指的是变量和函数能够被访问的范围,而JavaScript作用域就是指在JavaScript程序中,变量和函数的可…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部