javascript (canvas) szybka odpowiedź

Question

Witam!

Natrafiłem na dziwną sprawę natury technicznej javascriptu, kod przekaże najlepiej co mam na myśli: 

setTimeout('ctx.clearRect(0,0,canvas.width,canvas.height)', 500);

W przypadku powyżej kod działa poprawnie, funkcja wykonuje się po połowie sekundy. Natomiast kiedy cudzysłowy usunę:

setTimeout(ctx.clearRect(0,0,canvas.width,canvas.height), 500);

Ekran czyści się natychmiast. Czy ta funkcja bez cudzysłowów się w ogóle wykonuje? Komunikatu o błędzie nie ma. 

 

Answer 1

Jeśli w JS użyjesz zapisu nazwaFunkcji(), to JS od razu wykona tę funkcję (bo to oznaczają nawiasy). Dlatego drugi zapis jest tak naprawdę równoważny takiemu:

var result = ctx.clearRect( 0, 0, canvas.width, canvas.height );
setTimeout( result, 500 );

Musiałbyś otoczyć to wywołanie w tzw. funkcję anonimową i to ją przekazać:

setTimeout( function() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height );
}, 500 );

Answer 2

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

function

A function to be executed after the timer expires.

code

An alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. This syntax is not recommended for the same reasons that make using eval() a security risk.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html <-- Poczytaj, aktualizacja dzisiejsza (05/04/2019).

The effect of these options ensures that the string compilation done by setTimeout() and setInterval() behaves equivalently to that done by eval(). That is, module script fetches via import() will behave the same in both contexts.

setTimeout ma trzy dopuszczalne składnie. Trzecia składnia, to ta z użyciem apostrofów lub cudzysłowów, ponieważ ten parametr może być przekazany w trzecim syntax jako typ string.

Ogólnie, jeśli chodzi o tę trzecią składnię i to co pisze w dokumentacji, to jest to niezalecana praktyka z powodów bezpieczeństwa chodzi tutaj o eval, nie powinno się z tego korzystać w ogóle, chyba że w uzasadnionych przypadkach. Najlepiej pokodować trochę niskopoziomowo, żeby konkretnie wiedzieć dlaczego nie powinno się z tego korzystać, a nie tak wierzyć na słowo.

Żeby tego eval nie uruchamiać, opakuj kod w funkcję i powinno być OK.