防抖与节流的原理和封装

最新推荐文章于 2022-06-14 13:43:23 发布
最新推荐文章于 2022-06-14 13:43:23 发布
阅读量394 收藏 1
点赞数 4
分类专栏： 笔记 文章标签： javascript vue 封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56344602/article/details/118915544
版权

防抖 节流 搜索优化 用户输入 性能提升
关键词由CSDN通过智能技术生成

防抖- debounce

防止抖动 防止事件在短时间内频繁被触发，用户停止输入后，延迟超过500ms时，才去搜索此时的String,这就是防抖。

*原理:将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。

封装

 

调用

节流- throttle

我们不想用户一味的输入，而是给用户一些搜索提示，在一定的时间内只触发一次 ，所以在当中限制每过500ms就查询一次此时的String，这就是节流。

原理:节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

封装

 

海海呐
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
什么是防抖和节流？有什么区别？如何实现？
黑夜中的潜行者
01-07 3405
防抖n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。节流n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。
防抖节流原理及实现（含演示图）
hhhhhhhssss的博客
07-13 7335
文章目录前言一、防抖（debounce）1、什么是防抖？2、防抖实现二、节流（throttle）1.什么是节流？2.节流实现总结 前言 随着前端飞速的发展，用户体验也越来越重要。大家在逛一些网站时，会不会手贱，去疯狂的点击某个按钮，但是做了后却发现，网站都是，你点归你点，我动算我输。这其实就是因为做了防抖节流操作啦，为什么这两个东西这么神奇呢？让我们一起探究一下吧。 一、防抖（debounce） 1、什么是防抖？ 通俗来说就是当一个事件一直处于频繁触发的情况下，禁止触发，直到频率降低到规定的程度,才允许
防抖和节流实现原理
无知者无畏
12-20 1031
防抖或是节流：限制函数的执行次数 防抖：通过 settimeout的方式，在一定的时间间隔内，将多次触发变成一次触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖和节流</t
防抖和节流原理分析
蜗牛不会跑
09-23 8479
窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。 eg：搜索框的请求优化，输入搜索词条需要立即触发搜索请求时，防抖和节流可以将多个请求合并为...
防抖与节流
马优晨
06-04 510
防抖 如果小伙伴们手头有电脑，并感兴趣想先自己思考下什么是防抖。可以将代码复制到浏览器，尝试点击按钮，并关注下控制台，看看 Console 是如何打印的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten...
js 防抖和节流
zhengzhengwang的专栏
06-16 141
防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 // 防抖函数 const debounce = (fn, delay) => { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }; 节流函数原理:规定在一个单...
浅析Vue 防抖与节流的使用
10-15
在前端开发中，特别是在使用Vue.js框架进行项目开发时，我们经常会遇到需要优化性能的场景。...通过实例代码的学习和应用，我们可以更好地掌握Vue中防抖与节流的使用方法，并在实际项目中灵活运用。
当Flutter遇到节流与防抖的思路和流程优化
08-26
"Flutter中的节流和防抖思路与流程优化" Flutter是一个跨平台的免费开源UI框架，可以在iOS和Android平台上开发高性能、高质量的原生应用。然而，在Flutter开发中，经常会遇到节流和防抖的问题。函数节流和函数防抖...
Vue的click事件防抖和节流处理详解
10-16
本文将针对Vue框架中的click事件，详细讲解防抖和节流的实现和原理。 首先，我们来解释一下防抖和节流的概念： - 函数防抖（debounce）：指的是当事件持续触发，防抖函数会等待一定的时间，在这段时间内如果事件...
防抖与节流的封装函数与使用详解
01-20
为了解决这个问题，我们可以采用函数节流（throttle）和函数防抖（debounce）技术。 函数防抖（debounce）的基本思想是在一系列连续的调用中，只有在最后指定的一段时间内没有新的调用，才会执行函数。这个策略就像...
防抖节流函数js封装模块
最新发布
10-19
为了方便使用，我们可以将防抖和节流的实现封装成一个 JavaScript 模块。在这个模块中，我们定义了 debounce 和 throttle 两个函数，它们分别实现了防抖和节流功能。 在 debounce 函数中，我们使用一个计时器来延迟...
聊聊手机上使用的防抖技术
hjwang1的专栏
02-20 3189
ref:微信公众号MyWishList文章 Original from Laze Sun MyWishList 2020-10-16 本周三早上一点，苹果发布了 iPhone 12 系列，在发布会后，不乏有网友希望我们来详细讲解一下 iPhone 12 Pro Max 上首发的传感器位移式光学图像防抖究竟是个什么玩意儿。所以我们这次就从最基础的传统电子防抖出发，以时间为顺序一点点向各位科普手机上的防抖技术都有哪些。 1.传统电子防抖 实际上电子防抖在手机上的出现比我们想象中早得多。早..
防抖节流之总结篇
NurTuam—何永杰
08-13 385
防抖节流之总结篇 前言 为了处理用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃，而函数的节流与防抖就是为了解决类似需求而产生的。 防抖 概念：在短时间内多次触发同一个函数，只执行最后一次。 应用场景： 表单输入验证 表单输入触发搜索 ajax resize/scroll/touch/mouseove 事件 原理： 通过计时器延迟函数执行，短时间内再次触发时重置并添加新计时器。 实现： 基础版： function debounce(fn,w
vant列表节流
qq_45184152的博客
05-27 322
<template> <van-list :v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload" > <van-cell v-for="(item,index) in list" :key="index"> <cell-list :produc
vue实战性能优化-节流防抖路由懒加载gzip减少接口请求
weixin_49855711的博客
01-08 788
**前言：**这是自己在做vue移动端项目中总结的几点关于性能优化的知识点，分享记录一下。 文章有以下几个优化部分 gzip图片压缩 路由懒加载 减少接口请求 keep-alive页面缓存 防抖节流工具型方法封装 ​ 一、gzip图片压缩 ** **gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。(需要后端的支持) 步骤：（按步骤来） 1、安装 npm i compression-webp
优雅解决按钮”重复点击“问题：支付按钮防刷等
HZ___ZH的博客
03-16 642
应用场景： 对于支付按钮或者收藏等，需进行一定处理，防止短时间内重复点击，多次请求接口，造成不必要资源浪费。 解决方案： css样式：对于button按钮，可以使用setAttribute(‘disabled’, xxx)和removeAttribute(‘disabled’)来禁止用和恢复。 防抖：立即执行一次，例如按钮防抖，防止用户多次点击（下一次调用必须与前一次调用的时间间隔大于wait才会触发）。 function debounce(func, wait, immediate
防抖，防止表单重复提交 vue js
u013361179的博客
11-12 797
util.js export const debounce = function (func, wait, immediate) { var timer = null var result = null return function proxy () { // 保存的就是事件对象 var params = [].slice.call(arguments) var self = this var callNow = !timer && immediate
接口调用次数限制,时间限制如何设计
weixin_39831786的博客
06-19 1万+
1,先看下一我的代码里边什么也没有,但是调用的话里边功能绝对不会少,并且还能规定调用次数和时间限制,例如5分钟之内只能调用几次等等. @RestController @RequestMapping("/photo") public class GoogleController { /** * actionGG方法用于抓取Google图片 * actionGG 方法名...
Vue防抖（三种方式）
热门推荐
qq453660983的博客
06-14 2万+
Vue防抖（三种方式）
js防抖和节流函数封装
07-28
防抖和节流是两种常用的函数优化技术，可以用来限制函数的执行频率，提高性能和用户体验。 防抖函数的作用是在短时间内...以上是基本的防抖和节流函数封装示例，可以根据实际需求进行调整和扩展。希望能对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海海呐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值