JS防抖节流函数的实现与使用场景

JS防抖节流函数的实现与使用场景

什么是JS防抖和节流?

  • 防抖:是指在一段时间内,多次触发同一事件,只执行一次函数。即当一连串的操作被触发时,只有最后一个操作被执行而前面的操作都被忽略了。
  • 节流:是指在一段时间内,多次触发同一事件,只执行一次函数。即在规定的时间内,重复触发只会响应一次,并阻止事件触发后一段时间内的操作。

防抖函数实现及使用场景

实现

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

防抖的原理是使用定时器,在规定时间内只执行一次函数,如果在规定时间内被多次调用,则会清除之前的计时器,重新开始计时。

使用场景

输入框实时搜索是常用的防抖场景。还有一些需要频繁操作DOM的事件,如窗口的调整、滚动条的移动等操作,为了防止频繁操作导致页面卡顿,可以使用防抖函数来控制事件的执行。

// 输入框实时搜索
const input = document.querySelector('#input')
input.addEventListener('input', debounce(function() {
  // 搜索相关逻辑
}, 500))

节流函数实现及使用场景

实现

Throttle

function throttle(fn, delay) {
  let lastTime = 0
  return function () {
    let now = Date.now()
    if (now - lastTime > delay) {
      fn.apply(this, arguments)
      lastTime = now
    }
  }
}

Throttle的原理是在规定时间内,防止函数无限制地执行,只有在规定时间之后才能触发下一次函数的执行。

Leading Throttle

function leadingThrottle(fn, delay) {
  let lastTime = 0, firstTime = true
  return function () {
    let now = Date.now()
    if (firstTime || (now - lastTime > delay)) {
      fn.apply(this, arguments)
      lastTime = now
      firstTime = false
    }
  }
}

Leading Throttle的特点是第一次调用立即执行,然后在规定时间内才能触发下一次函数执行。

Tailing Throttle

function trailingThrottle(fn, delay) {
  let lastTime = 0, timer = null
  return function () {
    let now = Date.now()
    let diff = now - lastTime
    if (diff >= delay) {
      clearTimeout(timer)
      timer = null
      lastTime = now
      fn.apply(this, arguments)
    } else if (!timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = Date.now()
        fn.apply(this, arguments)
      }, delay - diff)
    }
  }
}

Tailing Throttle和Leading Throttle不一样的地方在于,首次不会立即执行,而是在下一次执行的时候将上一次未执行的操作一起执行。

使用场景

在一些频繁触发的场景下使用节流函数能够减少函数执行的频率,从而提高页面性能。

// 窗口resize事件
window.addEventListener('resize', throttle(function() {
  // 处理DOM相关操作
}, 500))

在滚动时计算需要出现的元素数量时,使用Tailing Throttle能够在滚动结束时将所有需要出现的元素一起计算。

// 滚动时计算需要出现的元素数量
window.addEventListener('scroll', trailingThrottle(function() {
  // 计算需要出现的元素数量,并显示
}, 500))

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS防抖节流函数的实现与使用场景 - Python技术站

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

相关文章

  • JavaScript中的this引用(推荐)

    JavaScript中的this引用(推荐) 在JavaScript中,this是一个非常重要的关键字,它指向了当前执行代码的上下文对象。但是,它的使用也非常容易出现问题,特别是当它嵌套在其他对象中时。在本文中,我们将详细讲解this的引用,以及如何正确地使用它。 什么是this? this是一个指向当前执行代码的上下文对象的关键字。在JavaScript中…

    JavaScript 2023年6月10日
    00
  • javascript用defineProperty实现简单的双向绑定方法

    下面是javascript用defineProperty实现简单的双向绑定方法的攻略: 1. 了解Object.defineProperty方法 Object.defineProperty是Javascript中的一个对象方法,它允许我们在已有的对象上增加一个属性并定义它的属性描述符。 它的第一个参数是需要定义属性的对象,第二个参数是属性名称,第三个参数则是…

    JavaScript 2023年6月10日
    00
  • 实例详解Python装饰器与闭包

    实例详解Python装饰器与闭包 概述 Python装饰器与闭包是Python高级编程中非常重要的概念,掌握它们可以使我们写出更加优美、高效且具有可读性的代码。本文将详细讲解Python装饰器和闭包的使用方法和原理,并提供两个示例来说明其用法。 装饰器 什么是装饰器 装饰器是一种用于修改或扩展函数功能的Python语法结构。它可以通过注解函数来实现,不需要修…

    JavaScript 2023年6月10日
    00
  • Javascript Boolean toString 方法

    以下是关于JavaScript Boolean对象的toString()方法的完整攻略。 JavaScript Boolean对象的toString()方法 JavaScript Boolean对象的toString()方法将Boolean对象转换为字符串。该方法接受一个参数,用于指定输出字符串基数(进制数),默认为10。 下面是一个使用Boolean对象的…

    JavaScript 2023年5月11日
    00
  • js中将字符串转换成json的三种方式

    将字符串转换成 JSON 对象,在 JavaScript 中实际上有三种方式。 方法一:使用 JSON.parse() JSON.parse() 方法将 JSON 格式的字符串转换成 JavaScript 对象。 let jsonString = ‘{"name": "Tom", "age": 20…

    JavaScript 2023年5月27日
    00
  • JavaScript数组的定义及数字操作技巧

    关于JavaScript数组的定义及数字操作技巧,以下是一份完整攻略: 定义JavaScript数组 1. 直接定义 使用[]定义一个空数组,或者使用[element1, element2, …]定义一个带有初始元素的数组。 示例:定义一个空数组和一个包含元素的数组 let arr1 = []; let arr2 = [‘apple’, ‘banana’…

    JavaScript 2023年5月19日
    00
  • 身份证号码前六位所代表的省,市,区, 以及地区编码下载

    身份证号码前六位所代表的省、市、区,以及地区编码是中国身份证的重要组成部分。掌握身份证号码前六位所代表的内容,有助于我们判断身份证持有人的籍贯、户籍所在地等信息,对于公安、银行、保险等领域的工作人员也非常有用。下面就是身份证号码前六位所代表的省、市、区、以及地区编码的下载攻略: 下载身份证号码前六位的编码表 身份证号码前六位所代表的省、市、区、以及地区编码非…

    JavaScript 2023年5月19日
    00
  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    我可以为您详细讲解一下Javascript ES6中的箭头函数。 什么是箭头函数? 箭头函数,也被称为lambda函数,是ES6新引入的一种函数定义方式,使用 => 来定义函数,相比传统的函数定义有着更为简洁的语法。箭头函数语法如下所示: (param1, param2, …, paramN) => { statements } 其中,参数列…

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