【odoo17】前端中的防抖函数

概要

        在Odoo前端开发中,防抖(Debounce)技术是一种用于优化性能和提升用户体验的技术。防抖主要用于限制高频事件的触发,例如输入框的输入事件、窗口的调整大小事件或滚动事件。通过限制这些事件的频繁触发,可以减少不必要的计算和资源消耗,从而提升应用的响应速度和性能。

特点

        防抖技术是一种优化技术,用于在事件频繁触发时减少实际调用次数。其对比普通延时器而言,其基本原理是在事件被触发后等待一定时间,如果在这段时间内事件再次被触发,则重新开始计时,直到等待时间结束才执行事件处理函数。

调用方式

/** @odoo-module */import { registry } from "@web/core/registry";
import { FormController } from "@web/views/form/form_controller";
import { formView } from "@web/views/form/form_view";
import { useService } from "@web/core/utils/hooks";
//导入防抖函数
import { useDebounced } from "@web/core/utils/timing";class OrderFormController extends FormController {setup() {super.setup();this.orm = useService("orm");this.notificationService = useService("notification");//给方法printLabel增加防抖,避免频繁调用orm消耗资源。this.debouncedPrintLabel = useDebounced(this.printLabel, 200);}async printLabel() {const serverResult = await this.orm.call(this.model.root.resModel, "print_label", [this.model.root.resId,]);if (serverResult) {this.notificationService.add(this.env._t("Label successfully printed"), {type: "success",});} else {this.notificationService.add(this.env._t("Could not print the label"), {type: "danger",});}return serverResult;}
}OrderFormController.template = "demo.OrderFormView";export const orderFormView = {...formView,Controller: OrderFormController,
};registry.category("views").add("order_form_view", orderFormView);

小结

        多写多敲多思考,毕竟,知己知彼才能看懂源码。

Tip:本人才学尚浅,如有纰漏,还请不吝赐教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL源码分析——索引扫描

这里,我们分析一下索引扫描的过程,以最简单的select * from t1 where a 100;语句为例,分析一下查询的过程。 postgrespostgres# \d t1;Table "public.t1"Column | Type | Collation | Nullable | Default ------------------…

a-select vModel时placeholder不显示问题

目录 a-select vModel时placeholder不显示问题 a-select vModel时placeholder不显示问题 问题描述&#xff1a;select 组件绑定了v-model和placeholder&#xff0c;v-model的value默认值为空字符串或者null时&#xff0c;select组件的placeholder属性不显示 <a-select v-m…

用小频谱仪观察收音机的本振

我找了一颗中周&#xff0c;想搭建一个几百khz的振荡电路&#xff0c;类似中波的本振&#xff0c;但是搭建了却看不到任何起振的波形。 遂想先看看已经装调好的中波收音机的本质波形是怎么样的&#xff1f; 用杜邦线加上一个夹子。把线夹到小频谱的天线杆上面。 取信号位置可…

windows实现python串口编程

一、windows安装python Welcome to Python.org 根据windows是64位找到对应的版本下载 下载完后直接安装即可&#xff01; 打开cmd查看python版本 $ python --version #查看版本 二、串口编程 1、安装pyserial库 pyserial是Python中的一个库,用于处理串口通信。 cmd…

ARM32开发——中断

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 中断概念中断分类中断触发条件 中断概念 中断是计算机系统中的一种机制&#xff0c;用于响应外部事件或内部事件,它可以使单片机暂…

former系列在时间序列预测任务上的研究综述

总&#xff1a;基于Transformer的LSTF解决方案 现有基于Transformer的LSTM解决方案设计要素总结如下&#xff1a; 从图中可以看出&#xff0c;Transformer在时序中应用具体包含以下几个步骤&#xff1a; 1&#xff09;时序分解&#xff1a;对于数据处理&#xff0c;TSF中0均…

5、分支对比 - 课件

一、基础知识 对比项双分支多分支多个if语句语法if-else语句if-else if-else语句多个独立的if语句分支数量只有两个分支可以有多个分支每个if语句都是一个独立的分支判断条件单一条件判断,结果为真或假按顺序判断多个条件,只执行第一个满足的分支每个if语句有独立的判断条件执…

OpenGL3.3_C++_Windows(6)

添加一个Editor camera /\/\/\/\/\//\/\/\/\/\/\/\/\//\/\///\/\/\/\//\/\/\/\//\//\/\/\/\/\\/原理&#xff1a;接受用户输入&#xff08;鼠标&#xff0c;按键……&#xff09;&#xff0c;通过&#xff08;callback / 内置API&#xff09;获取差值 / 是否触发用户输入&…

极速查询:StarRocks 存算分离 Compaction 原理 调优指南

作者&#xff1a;丁凯&#xff0c;StarRocks TSC member/镜舟科技云原生技术负责人 StarRocks 在数据摄入过程中&#xff0c;每次操作都会创建一个新的数据版本。在查询时&#xff0c;为了得到准确的结果&#xff0c;必须将所有版本合并。然而&#xff0c;随着历史数据版本的累…

关于 MySQL 5.7 升级 8.0 时 INT 显示问题分析

本案例中的客户是从 MySQL 5.7.36 升级到 MySQL 8.0.35&#xff0c;升级完成后业务反馈表结构有变化&#xff0c;升级前某个表的字段数据类型为 INT(10)&#xff0c;升级后变成了 INT&#xff0c;客户咨询有什么影响没有&#xff1f; 作者&#xff1a;张昊&#xff0c;DBA&…

JavaScript日期对象、DOM节点操作(查找、增加、克隆、删除)

目录 1. 日期对象2. DOM节点操作2.1 查找节点2.2 增加节点2.3 克隆节点2.4 删除节点 1. 日期对象 实例化日期对象&#xff1a; 获取当前时间: new Date()获取指定时间: new Date(2023-12-1 17:12:08) 日期对象方法: 方法作用说明getFullYear()获得年份获取四位年份getMonth…

logback-spring.xml 小记

为什么不用logback.xml 名字 加载顺序:logback.xml>application.yml>logback-spring.xml 使用xml中使用到配置文件属性时,就会报错 为什么logback中记录不到运行时报错 logback获取不到堆栈错误 解决办法:在全局错误出使用log.error()指定输出 为什么打印不出来myba…

五大API接口:提升你的应用性能与用户体验

引言&#xff1a; 简述API接口的重要性引入API接口对于提升应用性能和用户体验的贡献 API接口简介&#xff1a; 定义&#xff1a;解释什么是API接口作用&#xff1a;概述API接口在软件开发中的作用 1. 数据访问API 功能描述&#xff1a;提供快速、安全的数据存取功能提升性…

“首秀”欧洲杯,海信冰箱欧洲市占率居国产品牌首位

随着欧洲杯的火热开赛&#xff0c;挑灯夜战、观看球赛的时刻已经来临。此时&#xff0c;你需要何物相伴&#xff1f;是打开冰箱&#xff0c;取出真空腌制的食材&#xff0c;亲手烹饪一场观赛盛宴&#xff1f;还是取出极致保鲜的荔枝、樱桃&#xff0c;一边观赛一边品味&#xf…

部署yum仓库

目录 安装软件包 yum 配置文件 缓存功能操作步骤 创建并配置本地仓库文件 yum相关命令 yum install __ yum repolist yum list __ yum info __ yum search __ yum whatprovides __ yum remove __ yum -y update __ yum history yum grouplist yum groupinstall…

如何使用Vue3和ApexCharts轻松创建交互式图表

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于Vue3的ApexCharts动态图表展示 应用场景 本代码段适用于在Vue3应用中使用ApexCharts库创建交互式、可视化的图表。这些图表可以用于展示各种数据&#xff0c;例如销售额、支出、利润等&#xff0c;从而帮…

Microsoft Store打不开解决办法

//卸载Microsoft Store Get-AppxPackage -alluser WindowsStore | Remove-AppxPackage //重装 Get-AppxPackage -AllUsers Microsoft.WindowsStore* | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register “ ( ( (_.InstallLocation)\AppXManifest.xml”}

ARP攻击和DNS攻击有什么区别

ARP攻击和DNS攻击的明显区别 一、定义与原理 ARP攻击&#xff1a; 定义&#xff1a;ARP攻击&#xff08;Address Resolution Protocol Attack&#xff09;是局域网最常见的一种攻击方式&#xff0c;其基本原理是通过伪造ARP数据包来窃取合法用户的通信数据&#xff0c;造成影…

006 spring事务支持

文章目录 事务回顾事务介绍事务并发问题(隔离性导致)事务隔离级别 Spring框架事务管理相关接口Spring框架事务管理的分类编程式事务管理(了解)声明式事务管理(重点) 事务管理之XML方式业务层持久层单元测试代码配置事务管理的AOP 事务管理之混合方式事务管理之基于AspectJ的纯注…

不重新安装Anaconda找回不见的Anaconda Prompt

找回Anaconda Prompt只需三步 系统&#xff1a;win11 x641.cd Anaconda的安装目录2. Anaconda Prompt又回来了 系统&#xff1a;win11 x64 1.cd Anaconda的安装目录 winR 输入cmd 进入命令行&#xff0c;进入到Anaconda的安装目录 eg&#xff1a;我的Anaconda安装在&#xff…