【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：本人才学尚浅，如有纰漏，还请不吝赐教！