关于JavaScript防抖与节流的区别与实现

下面是关于JavaScript防抖与节流的区别与实现的完整攻略。

1. 防抖与节流的定义

防抖和节流都是针对一些高频率触发的事件而出现的优化方案。它们的基本思路都是减少一些重复触发导致的性能问题。

  • 防抖:当一个用户连续地触发某个事件时,防抖会在一定时间内只执行一次该事件,如果在这个时间段内该事件再次被触发,则重置时间。可以理解为:事件被触发后,等待一段时间,如果这段时间内没有再次触发该事件,则执行该事件。防抖的应用场景:搜索联想,用户在输入时只有停止输入一段时间后才需要触发联想。

  • 节流:当一个用户连续地触发某个事件时,节流会定期执行该事件,即使在这段时间内该事件再次被触发,也只会在这个定期时间到达后再次执行,不会重复执行。可以理解为:事件被触发后,每隔一定时间段后执行一次该事件。节流的应用场景:滚动条事件,每隔一段时间执行一次页面滚动时的位置计算。

2. 防抖与节流的实现

2.1 防抖的实现

下面是一个基本的防抖实现代码:

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    // 确定执行时机
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

这段代码中的fn为需要执行的函数,delay为等待的时间。这里应用了闭包来保存一个定时器的变量timer,用来控制执行时机。

下面是一个搜索联想的实现示例:

const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result')

searchInput.addEventListener('input', debounce(function(e) {
  const keyword = e.target.value
  // 当输入框的值为空时,隐藏搜索结果
  if (!keyword) {
    searchResult.style.display = 'none'
    return
  }
  // ajax请求相关数据并渲染搜索结果
  // ......
}, 300))

在上面的示例中,搜索输入框的中间态每输入一个字符,就会触发input事件,但当用户连续输入时,需要等待一段时间后,才开始执行渲染搜索结果。

2.2 节流的实现

下面是一个基本的节流实现代码:

function throttle(fn, delay) {
  let flag = true
  return function() {
    // 如果已经执行过该函数,则退出
    if (!flag) {
      return
    }
    // 确定执行时机
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}

这段代码中的fn为需要执行的函数,delay为等待的时间。这里应用了闭包来保存一个标志位flag,用来判断是否需要执行。

下面是一个网页滚动加载的实现示例:

const scrollWrapper = document.querySelector('.scroll-wrapper')
const listWrapper = document.querySelector('.list-wrapper')

scrollWrapper.addEventListener('scroll', throttle(function(e) {
  // 当滚动到底部时加载更多数据,避免多次触发
  if (scrollWrapper.scrollTop + scrollWrapper.clientHeight >= listWrapper.clientHeight) {
    // ajax请求加载更多数据
    // ......
  }
}, 1000))

在上面的示例中,当用户滚动到底部时,需要等待一段时间后再执行加载更多数据的操作,避免多次触发造成的性能问题。

3. 总结

在实际开发中,我们会根据实际场景选择防抖和节流的优化方案,避免不必要的重复执行而导致的性能问题。了解防抖和节流的实现可以更好地应对实际开发中的问题。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:关于JavaScript防抖与节流的区别与实现 - Python技术站

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

相关文章

  • JavaScript根据json生成html表格的示例代码

    下面我将详细讲解如何使用JavaScript根据JSON数据生成HTML表格的完整攻略。 前置知识 在了解这个示例代码之前,需要你掌握一些HTML、CSS和JavaScript的基础知识,同时了解JSON数据格式以及如何创建JavaScript数组和对象。如果你还不熟悉这些知识,请先学习一下。 示例代码 下面是一个根据JSON数据动态生成HTML表格的示例代…

    JavaScript 2023年5月27日
    00
  • JavaScript 学习笔记(十三)Dom创建表格

    以下是对“JavaScript 学习笔记(十三)Dom创建表格”的详细讲解: 什么是DOM DOM(Document Object Model)是一种表示文档结构的方式,它将整个文档看做是一个文档树形结构,树形结构中的每个节点都一个文档对象,节点可以有属性,也可以有子节点。 在Web页面中,DOM树形结构代表了页面的结构,我们可以通过JavaScript来操…

    JavaScript 2023年6月10日
    00
  • JS散列表碰撞处理、开链法、HashTable散列示例

    JS散列表碰撞处理是指在散列表中插入元素时,如果发现插入位置已经有元素,就会出现碰撞的情况。碰撞处理的目标是保持散列表中没有重复的元素。下面将介绍两种JS散列表的碰撞处理方法:开链法和线性探测法。 开链法 开链法也被称为拉链法,是一种常用的碰撞处理技术。它的基本思想是将每个散列值的链表放置在散列表的对应位置上,如果插入时与该链表中的某个元素发生碰撞,就将新元…

    JavaScript 2023年5月28日
    00
  • 基于JavaScript实现简单的轮播图

    下面就是基于JavaScript实现简单的轮播图的完整攻略: 1. 轮播图是什么? 轮播图指的是在网页上展示多张图片的方式之一。通常会设置一个区域,在该区域内依次展示不同的图片,经过一定的时间后,自动切换到下一张图片,循环往复。轮播图常用于网站的banner、产品展示等方面,能够吸引用户的眼球,提高网站的用户视觉体验。 2. 实现轮播图的原理 实现轮播图的关…

    JavaScript 2023年6月11日
    00
  • 详解js实时获取并显示当前时间的方法

    当我们开发网页时,有时需要在页面上显示当前的时间。下面是使用JavaScript实时获取并显示当前时间的三种方法。 方法1:使用setInterval()函数 setInterval()函数可以每隔一定时间间隔执行一次function中的代码。我们可以使用这个函数每秒钟更新时间。 <!DOCTYPE html> <html> <…

    JavaScript 2023年5月27日
    00
  • js读写json文件实例代码

    当我们需要读写JSON文件时,我们可以使用Node.js中的fs模块进行操作。下面是使用Node.js读写JSON文件的两个示例: 示例一:读取JSON文件 首先,在JavaScript文件的开头引入 fs 模块,并使用 fs.readFileSync()方法读取JSON文件: const fs = require(‘fs’); const data = f…

    JavaScript 2023年5月27日
    00
  • javascript函数式编程程序员的工具集

    对于JavaScript函数式编程程序员,以下是一些常用的工具集合,我们将会一一讲解。 Ramda Ramda是一个功能强大且易于使用的JavaScript函数式编程库。它包含很多函数,如map,filter,compose等,以帮助你更容易地完成计算型编程任务。 下面是一个简单的示例,演示如何使用Ramda: import R from ‘ramda’; …

    JavaScript 2023年5月27日
    00
  • 比较简洁的JavaScript 实时显示时间的脚本 修正版

    首先,我们需要明确一下我们要完成的目标,即实时显示时间的脚本。这个脚本需要使用 JavaScript 语言来完成。 以下是使用 Markdown 编写的完整攻略: 简洁的 JavaScript 实时显示时间的脚本 修正版 目标 本文主要介绍如何使用 JavaScript 语言编写简洁的实时显示时间的脚本。我们的目标是通过代码实现一个时钟功能,可以动态地显示当…

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