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日

相关文章

  • 基于JavaScript实现淘宝商品广告效果

    让我来详细讲解一下”基于JavaScript实现淘宝商品广告效果”的完整攻略。 1. 简介 该攻略介绍了如何使用JavaScript实现淘宝商品广告效果,这种效果通常使用在商品推广页和商城首页等页面进行商品推广。在本攻略中,我们将使用一些JavaScript技术,例如jQuery库和CSS3动画技术,来实现淘宝商品广告效果。 2. 步骤 以下是实现淘宝商品广…

    JavaScript 2023年6月11日
    00
  • 原生js实现弹窗消息动画

    下面是“原生js实现弹窗消息动画”的完整攻略: 简介 弹窗消息动画是网页中常见的提示形式,它通过出现和消失的动画效果,吸引用户的注意力,提示用户当前的操作状态或者重要的信息。在本文中,我们将介绍如何使用原生JS实现弹窗消息动画。 需要的技术栈 HTML CSS JavaScript 实现步骤 创建HTML结构 首先,我们需要在HTML中创建弹窗消息的结构。这…

    JavaScript 2023年6月10日
    00
  • javascript键盘事件全面控制脚本代码

    下面我将为您详细讲解“JavaScript键盘事件全面控制脚本代码”的完整攻略。 简介 JavaScript键盘事件指被触发时相关动作可以被监听的事件,可以对用户在键盘上输入的所有数据进行监听和控制,从而实现对脚本代码的全面控制。 详细说明如下: 键盘事件类型 JavaScript键盘事件常用的事件类型包括: keydown:按下键盘上的任意键时触发。 ke…

    JavaScript 2023年6月11日
    00
  • JavaScript 数组遍历的五种方法

    JavaScript 数组遍历的五种方法如下: 1. forEach() array.forEach(function(currentValue, index, arr), thisValue) forEach() 方法用于调用数组中的每个元素,并将元素传递给回调函数。该方法不会返回新的数组,而是在原始数组中执行回调函数。回调函数可以接收三个参数:当前元素的…

    JavaScript 2023年5月27日
    00
  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    当我们使用JS的setTimeout函数在火狐浏览器下出现不兼容失效不执行的问题时,可以使用以下两种方法进行解决: 方法一:使用匿名函数替代字符串函数 在setTimeout函数中传入的字符串函数在Chrome和其他浏览器中可以正常执行,但是在火狐浏览器中则可能因为严格模式下的限制而不能正常工作。 // 无法在火狐浏览器中正常执行 setTimeout(‘a…

    JavaScript 2023年6月11日
    00
  • jQuery 1.5.1 发布,全面支持IE9 修复大量bug

    jQuery 1.5.1 是一款流行的 JavaScript 库,它提供了便捷的 API 和强大的功能,可以让开发人员更加轻松地操作网页中的元素,处理事件等等。对于使用 jQuery 的开发人员来说,版本更新是必不可少的,因为每个版本都会修复一些 bug,增加新的功能。下面我来详细讲解一下“jQuery 1.5.1 发布,全面支持IE9 修复大量bug”的完…

    JavaScript 2023年6月11日
    00
  • 一文带你掌握axios 工具函数

    一文带你掌握axios 工具函数 概述 Axios 是一个基于 Promise 的 HTTP 请求库,可以用于浏览器和 Node.js。它非常方便、易用,而且具有很高的可定制性。本文将详细介绍 Axios 工具函数。 Axios 工具函数 Axios 中有许多工具函数,下面是其中一些常用的工具函数以及它们的用法: axios.create axios.cre…

    JavaScript 2023年6月11日
    00
  • 基于canvas实现的钟摆效果完整实例

    下面我将为你详细讲解“基于canvas实现的钟摆效果完整实例”的完整攻略。 1. 需求和准备工作 首先我们需要明确需要实现的功能,即基于canvas实现一个可以进行摆动的钟摆效果。接下来需要准备一些工作如下: 编写HTML文件,引入canvas画布和JS脚本文件 编写JS代码实现钟摆效果 在HTML文件中生成一个canvas画布 2. 实现步骤 2.1 创建…

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