2
respostas

[Projeto Alurabank - Aula 4-5 - Revisando Decorator] Decorator @throttle não funciona

Segui o passo a passo da aula 04-05 (Revisando decorators) e não obtive êxito no resultado final.

A primeira versão do decorator @throttle que criei (sem a adição da linha de código abaixo) deu certo e funcionou.

if (event) event.preventDefault();

A segunda versão do decorator @throttle que criei (com a adição da linha de código acima) NÃO funcionou.

No console do browser aparece ...

ReferenceError: event is not defined [Lean More]
metodoModificado
http://localhost:3000/js/decorators/throttle.js:9:17
metodoModificado self-hosted:975:17 dispatch
http://localhost:3000/lib/jquery.min.js:3:10264
add/q.handle
http://localhost:3000/lib/jquery.min.js:3:8326

O que está acontecendo? Porque esse erro ?

Segue o código do NegociacaoController

import { MensagemView, NegociacoesView } from "../views/index.js";
import { Negociacao, NegociacaoWeb, Negociacoes } from "../models/index.js";
import { DateUtil } from "../util/index.js";
import { injetarDom, throtlle } from "../decorators/index.js";

export class NegociacaoController {

    @injetarDom("#data")
    private _inputData: JQuery;
    @injetarDom("#quantidade")
    private _inputQuantidade: JQuery;
    @injetarDom("#valor")
    private _inputValor: JQuery;
    private _negociacoes = new Negociacoes();
    private _negociacoesView = new NegociacoesView("#negociacoesView");
    private _mensagemView = new MensagemView("#mensagemView");

    constructor() {
        // this._inputData = $("#data");
        // this._inputQuantidade = $("#quantidade");
        // this._inputValor = $("#valor");
        this._negociacoesView.update(this._negociacoes);
    }

    @throtlle()
    adicionar() {

        let data = DateUtil.toDate(<string>this._inputData.val());
        if (!DateUtil.ehDiaUtil(data)) {
            this._mensagemView.update("Não são permitidas negociações em sábados ou domingos.");
            return;
        }

        const negociacao = new Negociacao(
            data,
            parseInt(<string>this._inputQuantidade.val()),
            parseFloat(<string>this._inputValor.val()),
        );

        this._negociacoes.adiciona(negociacao);
        this._negociacoesView.update(this._negociacoes);
        this._mensagemView.update("Negociação adicionada com sucesso.");
    }

    @throtlle()
    importarDados(): void {

        let houveErro = function (res: Response): Response {
            if (res.ok) {
                return res;
            }
            else {
                throw new Error(res.statusText);
            }
        }

        window.fetch("http://localhost:8080/dados")
            .then(res => houveErro(res))
            .then(res => res.json())
            .then(
                (dados: NegociacaoWeb[]) => {
                    dados.map(
                        dado => new Negociacao(new Date(), dado.vezes, dado.montante)
                    ).forEach(
                        negociacao => this._negociacoes.adiciona(negociacao)
                    );
                    this._negociacoesView.update(this._negociacoes);
                }
            )
            .catch(err => console.log(err.message));
    }

}

Segue o código do decorator...

export function throtlle(timeout: number = 500): Function {

    return function (property: any, key: string, descriptor: PropertyDescriptor): void {
        const metodoOriginal: Function = descriptor.value;
        let timer: number = 0;

        let metodoModificado = function (...args: any[]) {
            if (event) event.preventDefault();

            let resultadoExecucao: any;
            window.clearTimeout(timer);
            timer = window.setTimeout(() => {
                resultadoExecucao = metodoOriginal.apply(this, args);
            }, timeout);
            return resultadoExecucao;
        }

        descriptor.value = metodoModificado;
    }

}
2 respostas

Boa tarde, Marcelo! Como vai?

Eu peguei a sua implementação do @throttle, substituí no projeto do mestre Flávio e funcionou tudo corretamente. Portanto, eu imagino que o problema que está ocorrendo no seu projeto é devido a outro detalhe! Se vc colocar o seu projeto no github, no dropbox ou no google drive e compartilhar o link aqui eu posso dar uma olhada melhor no que está acontecendo e tentar te ajudar!

O projeto está compartilhado em um repositório público no github. Segue os endereços logo abaixo...

Enderço SSH: git@github.com:marcelobc548/curso-typescript.git

Enderço HTTPS: https://github.com/marcelobc548/curso-typescript.git