FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Promise by ockley · Pull Request #277 · javascript-tutorial/da.javascript.info · GitHub

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension .html  (1) .md  (6) All 2 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
      • solution.md
      • task.md
      • solution.md
      • task.md
        • index.html
      • task.md
    • article.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
The output is: `1`.
Outputtet er: `1`.

The second call to `resolve` is ignored, because only the first call of `reject/resolve` is taken into account. Further calls are ignored.
Det andet kald til `resolve` ignoreres, fordi kun det første kald til `reject/resolve` tages i betragtning. Yderligere kald ignoreres.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

# Re-resolve a promise?
# Re-resolve et promise?


What's the output of the code below?
Hvad er outputtet af koden nedenfor?

```js
let promise = new Promise(function(resolve, reject) {
Expand Down
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

delay(3000).then(() => alert('runs after 3 seconds'));
delay(3000).then(() => alert('kører efter 3 sekunder'));
```

Please note that in this task `resolve` is called without arguments. We don't return any value from `delay`, just ensure the delay.
Bemærk at i denne opgave kaldes `resolve` uden argumenter. Vi returnerer ikke nogen værdi fra `delay`, men sikrer kun forsinkelsen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

# Delay with a promise
# Forsinkelse med et promise

The built-in function `setTimeout` uses callbacks. Create a promise-based alternative.
Den indbyggede funktion `setTimeout` bruger callbacks. Opret et promise-baseret alternativ.

The function `delay(ms)` should return a promise. That promise should resolve after `ms` milliseconds, so that we can add `.then` to it, like this:
Funktionen `delay(ms)` bør returnere et promise. Det promise bør indfries efter `ms` millisekunder. Vi kan så tilføje `.then` til det, sådan her:

```js
function delay(ms) {
// your code
// din kode
}

delay(3000).then(() => alert('runs after 3 seconds'));
delay(3000).then(() => alert('kører efter 3 sekunder'));
```
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,61 +1,56 @@
<!DOCTYPE html>
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<style>
.message-ball {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.circle {
transition-property: width, height;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
}
</style>
</head>

<body>

<button onclick="go()">Click me</button>

<script>

function go() {
showCircle(150, 150, 100).then(div => {
div.classList.add('message-ball');
div.append("Hello, world!");
});
}

function showCircle(cx, cy, radius) {
let div = document.createElement('div');
div.style.width = 0;
div.style.height = 0;
div.style.left = cx + 'px';
div.style.top = cy + 'px';
div.className = 'circle';
document.body.append(div);

return new Promise(resolve => {
setTimeout(() => {
div.style.width = radius * 2 + 'px';
div.style.height = radius * 2 + 'px';

div.addEventListener('transitionend', function handler() {
div.removeEventListener('transitionend', handler);
resolve(div);
<head>
<meta charset="utf-8" />
<style>
.message-ball {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.circle {
transition-property: width, height;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
}
</style>
</head>

<body>
<button onclick="go()">Click me</button>

<script>
function go() {
showCircle(150, 150, 100).then((div) => {
div.classList.add('message-ball');
div.append('Hej, verden!');
});
}, 0);
})
}
</script>


</body>
}

function showCircle(cx, cy, radius) {
let div = document.createElement('div');
div.style.width = 0;
div.style.height = 0;
div.style.left = cx + 'px';
div.style.top = cy + 'px';
div.className = 'circle';
document.body.append(div);

return new Promise((resolve) => {
setTimeout(() => {
div.style.width = radius * 2 + 'px';
div.style.height = radius * 2 + 'px';

div.addEventListener('transitionend', function handler() {
div.removeEventListener('transitionend', handler);
resolve(div);
});
}, 0);
});
}
</script>
</body>
</html>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@

# Animated circle with promise
# Animeret cirkel med promise

Rewrite the `showCircle` function in the solution of the task <info:task/animate-circle-callback> so that it returns a promise instead of accepting a callback.
Omskriv funktionen `showCircle` i løsningen fra opgaven <info:task/animate-circle-callback> så den returnerer et promise i stedet for at acceptere en callback.

The new usage:
Den nye brug:

```js
showCircle(150, 150, 100).then(div => {
div.classList.add('message-ball');
div.append("Hello, world!");
div.append("Hej, verden!");
});
```

Take the solution of the task <info:task/animate-circle-callback> as the base.
Brug løsningen fra <info:task/animate-circle-callback> som udgangspunkt.
Loading

Back | FazBrowse Home | New Git URL