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日

相关文章

  • JS闭包的几种常见形式实例详解

    JS闭包的几种常见形式实例详解 什么是闭包? 在理解闭包的几种形式之前,我们先来了解一下什么是闭包。 闭包指的是一个函数在返回时,能够记住并访问该函数定义时作用域中的变量。这可以通过在函数内部定义一个函数来实现。 闭包发挥着非常重要的作用,因为它可以在函数外部访问函数内部的变量和函数,并且使得这些变量和函数的作用域得以保存。 闭包的几种常见形式 1. 函数作…

    JavaScript 2023年6月10日
    00
  • JS仿JQuery选择器功能

    下面是JS仿JQuery选择器功能的完整攻略,包含如何实现选择器、示例说明以及注意事项等。 选择器实现原理 实现JS仿JQuery选择器功能的核心在于通过遍历DOM树,找到与选择器匹配的元素。以下是具体实现方法: 解析选择器字符串,获取选择器匹配的元素类型和其他属性,如类名、ID等。 遍历DOM树,从根节点开始,递归查找所有节点,将匹配选项和节点做比对。 检…

    JavaScript 2023年6月10日
    00
  • 与iframe进行跨域交互的解决方案(推荐)

    与iframe进行跨域交互是前端开发中常见的场景,但是由于同源策略的限制,直接使用JavaScript操作跨域iframe是不被允许的。那么,如何解决这一问题呢? 以下是利用postMessage进行与iframe跨域交互的解决方案(推荐): 步骤一:在iframe的源码中添加监听器 <html> <head> <script&…

    JavaScript 2023年6月11日
    00
  • JavaScript对象合并实现步骤介绍

    JavaScript对象合并是指把两个或多个对象的属性合并到一个对象中。在实践中,我们常常需要把两个或更多的对象结合在一起,以便方便地访问和处理数据。在本篇攻略中,我将介绍如何实现JavaScript对象的合并,步骤如下: 第一步:创建一个目标对象 首先,我们需要创建一个目标对象,作为合并后的结果。我们可以使用Object.assign()方法来创建一个新的…

    JavaScript 2023年5月27日
    00
  • JavaScript手写数组的常用函数总结

    接下来我将从以下三个方面详细讲解“JavaScript手写数组的常用函数总结”的完整攻略: 常用函数列表 函数的实现 示例说明 1. 常用函数列表 下面是JavaScript手写数组的常用函数列表,包括函数名称、参数和作用: 函数名称 参数 作用 push element 在数组末尾添加一个元素并返回新的长度 pop 无 删除数组末尾的元素并返回该元素 sh…

    JavaScript 2023年5月27日
    00
  • bootstrapValidator.min.js表单验证插件

    下面是关于bootstrapValidator表单验证插件的完整攻略。 Bootstrap Validator 概述 Bootstrap Validator 是一个用来为表单组件添加验证的 jQuery 插件。它使用了 Twitter Bootstrap 的样式,并集成了 jQuery 的特性,可以非常方便地为表单添加验证规则。 安装步骤 首先需要下载 Bo…

    JavaScript 2023年6月10日
    00
  • JavaScript数组操作函数汇总

    让我来为您详细介绍 JavaScript 数组操作函数的常用方法。 JavaScript数组操作函数汇总 1. push() 作用:向数组末尾添加一个或多个元素,并返回新的长度。 语法:arr.push(element1, …, elementN) 示例: let arr = [1, 2, 3]; arr.push(4, 5); console.log(…

    JavaScript 2023年5月27日
    00
  • 总结js函数相关知识点

    以下是总结 JavaScript 函数相关知识点的攻略: JavaScript 函数基础 定义函数 function funcName(param1, param2, …, paramN) { // 函数体 return expression; } 其中,funcName 是函数名,param1到paramN是参数,函数体中的 expression 是函…

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