js实现防抖(debounce)与节流(throttle)

防抖(debounce)

一句话概括:防抖是给定一个时间周期,如果触发事件的周期小于该事件(也就是触发过快),则不会触发事件。
举个例子:我给定的时间周期是1s,如果我在触发第一次事件后1s内触发该事件,则重新开始计时,直到触发周期大于1s才会执行事件的方法。

function debounce(fn,timeout){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(window,arguments)
        }, timeout);
    }
}

一句话概括:节流是给定一个时间周期,然后对频率大的触发进行削峰,如果触发事件的周期大于该事件(也就是触发过快),则会触发事件的周期限定在给定的周期内,如果小于则按照正常的时间触发。
举个例子:我给定的时间周期是1s,如果我在触发第一次事件后连续0.5s内触发该事件,那触发周期会变成每间隔1s执行事件。

节流(throttle)

function throttle(fn,timeout){
    let flag = true
    return function(){
        if(flag){
            setTimeout(() => {
                fn.apply(this,arguments)
                flag = true
            }, timeout);
        }
        flag = false
    }
}

其他应用场景举例

讲完了这两个技巧,下面介绍一下平时开发中常遇到的场景:

  1. 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
  2. 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)

第三方实现

如果自己不愿意封装,可以用第三方实现,比如lodash

原文链接:https://www.cnblogs.com/shinebay/p/17345692.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现防抖(debounce)与节流(throttle) - Python技术站

(0)
上一篇 2023年4月24日
下一篇 2023年4月24日

相关文章

  • 微信小程序页面间跳转传参方式总结

    下面是关于“微信小程序页面间跳转传参方式总结”的完整攻略。 前言 在微信小程序的开发中,我们经常需要在不同页面之间进行跳转,并且需要在页面之间传递参数。本文将总结出在微信小程序中实现页面之间传参的多种方式,并详细讲解其使用方法和注意事项。 方式一:通过 URL 参数传递数据 通过 URL 参数传递数据是最简单的一种传参方式。我们可以通过 wx.navigat…

    JavaScript 2023年6月11日
    00
  • JavaScript+Canvas模拟实现支付宝画年兔游戏

    概述 支付宝画年兔游戏是一款通过移动画笔,在画板上完成兔子图案的互动游戏。该游戏采用JavaScript+Canvas技术,将用户操作实时绘制在canvas画布上,使用户能够实现交互式的绘图体验。本文将详细介绍如何使用JavaScript+Canvas技术实现支付宝画年兔游戏。 准备工作 在开始实现支付宝画年兔游戏之前,需要做以下的准备工作: 确定绘图工具和…

    JavaScript 2023年6月11日
    00
  • JavaScript canvas绘制动态圆环进度条

    现在我来详细讲解如何通过 JavaScript canvas 绘制动态圆环进度条的完整攻略。 概述 原理:利用 <canvas> 标签绘制一个圆环,再通过控制圆环的起始弧度和结束弧度来实现进度条的动态效果。 需要掌握的知识: HTML5 <canvas> 标签的使用 ctx.beginPath()、ctx.closePath()、ct…

    JavaScript 2023年6月11日
    00
  • jsp/javascript打印九九乘法表代码

    关于JSP/Javascript打印九九乘法表代码的完整攻略,步骤如下: 步骤一:编写JSP页面 我们可以创建一个类似下面这样的JSP页面: <!DOCTYPE html> <html> <head> <title>九九乘法表</title> <meta charset="UTF-8…

    JavaScript 2023年5月28日
    00
  • Firefox+FireBug使JQuery的学习更加轻松愉快

    安装Firefox和FireBug插件 首先确保电脑上安装了Firefox浏览器 打开Firefox浏览器,点击菜单栏(右上角三条横线)中的“附加组件(Add-ons)” 在搜索框中输入“FireBug”,找到FireBug插件并点击“添加至Firefox” 安装完成后,重新启动Firefox浏览器即可使用FireBug插件 使用FireBug调试JQuer…

    JavaScript 2023年6月10日
    00
  • js实现字符全排列算法的简单方法

    下面是js实现字符全排列算法的简单方法的攻略: 1. 了解全排列算法的原理 全排列算法主要是针对给定的字符串,对其中的每个字符进行交换得到不同的排列。这个算法的主要思路是不断地交换当前字符串中的两个字符,直到交换到字符串的最后一个字符,然后将这一个排列输出,并将字符串还原到初始状态,进行下一次交换操作。 2. 实现全排列算法的代码 下面给出一种简单的实现全排…

    JavaScript 2023年5月28日
    00
  • JavaScript调试的多个必备小Tips

    JavaScript调试的多个必备小Tips 1. 使用控制台调试 控制台是JavaScript调试过程中不可或缺的工具之一,可以使用控制台输出变量值、调用函数、查看错误信息等。常用的控制台命令包括: console.log():输出变量值或文本信息到控制台。 console.error():输出错误信息到控制台。 console.info():输出信息到控…

    JavaScript 2023年6月11日
    00
  • JS添加或删除HTML dom元素的方法实例分析

    关于“JS添加或删除HTML dom元素的方法实例分析”的攻略,我将会为您提供一些详尽的说明。 添加HTML DOM元素 使用 JavaScript 来动态添加 HTML DOM 元素,对于网站交互性、用户体验以及动画效果的实现是非常有帮助的。 1. 使用 createElement 方法添加元素 createElement 方法可以创建一个指定的 HTML…

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