js防抖函数和节流函数使用场景和实现区别示例分析

JS防抖函数和节流函数是前端开发中常用的函数优化方法,可以有效提升页面性能和用户体验。它们的使用场景和实现区别如下:

防抖函数

防抖函数的作用是在函数触发频繁的情况下,限制函数执行的次数,确保函数在触发后的一定时间内只执行一次。

使用场景

防抖函数通常用于以下场景:

  • 搜索框输入联想:用户在输入框中快速输入字符时,会触发搜索请求,而防抖函数可以限制请求发送的次数,避免频繁的请求。
  • 按钮提交事件:由于用户可能会多次点击提交按钮,而防抖函数可以确保只有最后一次点击会触发提交事件。

实现方式

使用JavaScript实现防抖函数的代码如下:

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}

上述代码实现了一个通用的防抖函数。其中,fn参数是需要处理的函数,delay参数是限制函数执行的时间间隔。函数返回一个闭包,用来保存定时器对象和参数列表。当此函数被执行时,首先清除之前的定时器,然后再设置一个新的定时器,并在一定时间内执行函数。

示例说明

假设我们有一个搜索框输入联想功能,需要尽可能地减少发送网络请求的次数,我们就可以使用防抖函数优化代码:

<input type="text" id="search">
<script>
const searchInput = document.getElementById('search');
const debounceSearch = debounce(() => {
  // 发送搜索请求
}, 300);

searchInput.addEventListener('input', debounceSearch);
</script>

上述代码中,我们为输入框添加了input事件,当用户在输入框中输入字符时,会触发debounceSearch函数。由于debounce()函数的第二个参数是300ms,所以当用户在300ms内持续输入字符时,不会触发搜索请求。等待300ms后,会执行最后一次输入操作所触发的搜索请求。

节流函数

节流函数的作用是在函数持续频繁触发的情况下,限制函数的执行频率,确保函数在一定时间片段内只执行一次。

使用场景

节流函数通常用于以下场景:

  • 页面滚动监听:页面滚动事件会频繁触发,但是实际上只需要显示当前滚动位置附近的内容,而节流函数可以确保滚动事件每隔一定时间片段才触发。
  • 鼠标移动事件:鼠标移动事件同样会频繁触发,而节流函数可以确保每隔一定时间间隔才触发鼠标移动事件。

实现方式

使用JavaScript实现节流函数的代码如下:

function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last > delay) {
      fn.apply(this, args);
      last = now;
    }
  }
}

上述代码实现了一个通用的节流函数。其中,fn参数是需要处理的函数,delay参数是限制函数执行的时间间隔。函数返回一个闭包,用来保存上一次函数执行的时间戳。当此函数被执行时,如果当前时间和上一次执行时间超过了设定的时间间隔,则执行一次函数,并更新上一次执行时间。

示例说明

假设我们需要在页面滚动时来更新页面标题,但是需要确保标题的更新频率不要太高,我们就可以使用节流函数优化代码:

<h1 id="title">标题</h1>
<script>
const titleElement = document.getElementById('title');
const throttleUpdateTitle = throttle(() => {
  const scrollTop = document.documentElement.scrollTop;
  titleElement.innerText = `当前滚动高度:${scrollTop}px`;
}, 300);

window.addEventListener('scroll', throttleUpdateTitle);
</script>

上述代码中,我们为window对象的scroll事件添加了节流函数throttleUpdateTitle。当用户滚动页面时,会更新标题文字,但是由于节流函数设置的时间间隔为300ms,所以每次滚动事件只有间隔大于300ms时才会更新标题文字。这样可以避免滚动引起的频繁更新,提高页面性能和用户体验。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js防抖函数和节流函数使用场景和实现区别示例分析 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 清除网页历史记录,屏蔽后退按钮!

    清除网页历史记录和屏蔽后退按钮可以通过一些技巧实现,下面我将为大家详细讲解这个过程。 清除网页历史记录 清除网页历史记录是为了保护隐私,避免别人查看我们的浏览历史。以下是步骤: 打开浏览器,找到浏览器菜单(通常在右上角)。 点击浏览器菜单,在下拉菜单中找到“设置”或“选项”等相关选项。 进入设置页面后,在“隐私与安全”或“清除浏览数据”等选项中找到“清除浏览…

    JavaScript 2023年6月11日
    00
  • 微信小程序接入腾讯云验证码的方法步骤

    下面就为你详细讲解“微信小程序接入腾讯云验证码的方法步骤”的完整攻略。 一、前置准备 1.1 注册腾讯云账户 首先需要前往腾讯云官网注册一个账号,如果已有腾讯云账户则可以直接登录。 1.2 在腾讯云上开通验证码服务 在腾讯云控制台中,搜索并进入“验证码”服务,按照提示开通并配置相应的参数。 1.3 在小程序后台获取小程序 appid 在微信公众平台的小程序管…

    JavaScript 2023年6月10日
    00
  • 详解jQuery的Cookie插件

    详解jQuery的Cookie插件攻略 1. 介绍 jQuery的Cookie插件是一个实用的、轻量的JavaScript工具,用于操作浏览器中的cookie(饼干)。该插件可用于读取、设置、删除和检查cookie,它为cookie操作提供了简洁的API接口,使得开发者能够轻松地处理cookie数据。 2. 安装 你可以从GitHub上下载该插件的最新版本,…

    JavaScript 2023年6月11日
    00
  • 原生js仿jquery实现对Ajax的封装

    下面是“原生js仿jquery实现对Ajax的封装”的完整攻略。 一、准备工作 在编写封装函数之前,我们需要首先准备好相关的环境和资源,包括: 一个封装Ajax的函数(我们将在下面进行编写) 一个浏览器环境,可以使用Chrome浏览器、Firefox浏览器等 一个文本编辑器,可以使用Sublime Text、Visual Studio Code等 一份API…

    JavaScript 2023年6月11日
    00
  • 详解Jotai Immer如何实现undo redo功能示例详解

    详解Jotai Immer如何实现undo redo功能示例详解 Jotai Immer是一个结合了Jotai和Immer两种状态管理库的工具,其中Immer提供了基于不可变数据结构的状态修改方式,Jotai则提供了状态的管理和更新功能。通过结合使用两个库,我们可以更加方便地进行状态管理,并实现undo redo功能。 安装和引入 首先,我们需要安装Jota…

    JavaScript 2023年6月11日
    00
  • JS装饰器函数用法总结

    下面我将详细讲解“JS装饰器函数用法总结”的完整攻略。 什么是装饰器模式 在软件工程中,装饰器模式是一种结构型设计模式,它允许你通过将对象包装在一个装饰器类中来动态地修改对象的行为。装饰器模式的核心思想是可以将方法或对象动态地添加到另一个对象中。这个模式使得程序可以在不修改原来的代码的情况下增加新的功能。 装饰器函数的用法 在ES7中,已经提供了装饰器语法,…

    JavaScript 2023年5月27日
    00
  • 原生JavaScript实现拖动校验功能

    这里是原生JavaScript实现拖动校验功能的完整攻略。 1. 准备工作 在实现拖动校验功能之前,需要准备以下几项工作。 1.1 HTML结构 首先,需要在HTML中创建一个<ul>列表,每条列表项包含一个可拖动的元素,如下所示: <ul id="drag-items"> <li class="d…

    JavaScript 2023年6月10日
    00
  • js跨域请求数据的3种常用的方法

    下面是详细讲解”js跨域请求数据的3种常用的方法”的攻略: 1. 跨域请求数据的背景 在Web开发的过程中,经常会遇到需要通过js代码来请求数据的情况。我们知道,由于同源策略(Same-origin policy)的限制,不同源(域)之间的js代码请求是受限制的。跨域请求数据就是在解决这个限制的前提下来实现的。 2. 跨域请求数据的3种常用的方法 2.1 J…

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