порядок выполнения функций JavaScript

0

Я вернусь к основам, чтобы лучше понять JavaScript. У меня есть веб-сайт для тестирования. Вот мой код

<html>
<head>
test
</head>

<script type="text/javascript">
function saySomething(message)
{
alert(message);
}

saySomething('Hello world!');

function addLoadListener(fn){
window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

addLoadListener(saySomething);


</script>


<body>
<div>blah blah blah</div>
</body>
</html>

Итак, есть эта функция, saySomething которая оповещает Hello World! , Я добавляю его в addLoadListener поэтому его можно вызвать во время загрузки страницы. И отлично работает до этой части. Но после этого снова вызывается, когда код запускается и вызывается [object Event] вместо Hello World! , Зачем? Что мне не хватает?

благодаря

  • 0
    Попробуй скрипку, все ок jsfiddle.net/X3vLP/1
  • 0
    @PratikJoshi Спасибо, Патрик, но я не вижу другого Hello World! после загрузки страницы. Также было бы хорошо, если бы вы предоставили объяснение, почему это происходит. Спасибо
Показать ещё 2 комментария
Теги:

5 ответов

-3
Лучший ответ

Может быть, вам не хватает вашего аргумента

<html>
 <head>
 test
 </head>

 <script type="text/javascript">
  function saySomething(message)
  {
 alert(message);
 }

 saySomething('Hello world!');

function addLoadListener(fn){
  window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

 addLoadListener(saySomething('Hello world!'));


 </script>


  <body>
  <div>blah blah blah</div>
  </body>
  </html>
  • 0
    Это не решает проблему. Функция saySomething теперь запускается немедленно, а не в событии load .
  • 0
    @ Кодер Ага! Так что все наоборот. Функция во время onload не работает. Имеет смысл. Благодарю. Способ понять основы. Что со мной не так?
4

Проблема в том, что после того, как вы присоедините функцию saySomething в качестве прослушивателя событий к событию загрузки окна, он позже вызывается с разными аргументами при срабатывании события. На самом деле аргумент является объектом события, поэтому вы видите предупреждение [object Event].

Хотя я не знаю реальной цели вашего кода, если вы хотите предупредить "Hello World!" string, и вам не нужны аргументы события, связанные с запущенным событием, вы можете привязать первый аргумент функции saySomething к "Hello World!" :

var boundHandler = saySomething.bind(window, "Hello World!");
addLoadListener(boundHandler);

Edit: Function.prototype.bind создает новую функцию, в которой this и все аргументы новой функции могут быть привязаны к определенным значениям. Важно отметить, что bind создает новую функцию, а исходная сохраняется. Вы можете создать столько связанных версий оригинала, сколько захотите.

Если вы вызываете boundHandler("something else") или boundHandler(), "Hello World!" все равно будет предупрежден вместо нового текста. Вот почему работает код обработки событий.

Если вы создаете связанную функцию следующим образом:

function alertThis() { alert(this); }
var boundFn = alertThis.bind("my new this");

alertThis() // "[object Window]" is alerted
boundFn() // "my new this" is alerted

Здесь больше информации о Function.prototype.bind: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind.

  • 0
    Цель моего кода - просто тестирование и лучшее понимание поведения JavaScript. Не могли бы вы уточнить, что именно делает эта линия? saySomething.bind(window, "Hello World!"); , Спасибо
  • 0
    Конечно, я отредактировал свой ответ, чтобы включить больше информации. Я надеюсь, что это помогает.
Показать ещё 3 комментария
1
<script type="text/javascript">
  function saySomething(message)
  {
 alert(message);
 }

 saySomething('Hello world!');

function addLoadListener(fn){
  window.addEventListener('load', fn, false);
alert("the previous alert came from onload");
}

 addLoadListener( function() { saySomething('Hello world!') });


 </script>
1

Когда происходит событие "load", он вызывает вашу функцию следующим образом: "saySomething (event)" - первый аргумент - это объект события. Не строка.

Поэтому вы должны что-то изменить в своем коде. Например:

function saySomething(message)
{
    var msg = typeof message != 'string' ? 'Hello world!' : message; //setting default message
    alert(msg);
}
1

Это связано с тем, что вы добавляете эту функцию в качестве прослушивателя событий. Первым аргументом функции прослушивателя событий является объект события. Вот почему вы получаете [object Event].

Вы можете связать свое сообщение с объектом контекста. Это один из способов решения вашей проблемы:

function saySomething(message) {
    alert(message);
}

function saySomethingListener(message) {
    saySomething(this.message);
}

saySomething('Hello world!');

function addLoadListener(fn) {
    window.addEventListener('load', fn.bind({message: 'Hello world!'}), false);
    alert("the previous alert came from onload");
}

addLoadListener(saySomethingListener);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню