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;
}
}