05-4 JavaScript関数高度タイマー、インスタントコール関数(IIFE)、厳格モード

タイマ関数

コールバック関数は、特定の期間内または特定の時間後に呼び出すことができる関数です.
時間に関するトランザクションの処理が可能
クロックの作成、アクションの実行などに使用します.

settimeout

指定した時間後に関数を1回呼び出す

setTimeout(function() {
  console.log('setTimeout 함수 입니다')
}, 1000) //밀리초 단위, 1000밀리초 → 1초

実行結果

1秒後に1回呼び出す

setInterval(関数、時間)

特定の時間に関数を呼び出す

setInterval(function() {
  console.log('setInterval 함수 입니다')
}, 1000)

実行結果

1秒に1回呼び出す(結果左の数字→何回か繰り返す)

タイマ削除関数

タイマID:setTimeout関数およびsetInterval関数を呼び出したときに返される値の数値

clearTimeout(タイマーID)/clearInterval(タイマーID)

const a = setTimeout(function() {
  console.log('setTimeout 함수 입니다')
}, 1000) 
const b = setInterval(function() {
  console.log('setInterval 함수 입니다')
}, 1000)


console.log(a, b)

//타이머 끄기
clearTimeout(a)
clearInterval(b)

コードの実行は1秒以内に終了するため、タイマーは1秒後に動作を開始する前にタイマーを閉じます.
だから結果は~~~?

何も表示しない!

インスタントコール関数(IIFE)

匿名関数を生成および即時に呼び出す関数IIFE(Immediately Invoked Function Expression)とも呼ばれています

型

<script>
  (function () {

  })()
</script>

どうして書きますか。

変数名が競合する可能性があります.

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
</script>

<!-- 내가 쓴 코드! -->
<script>
  const a = 20
</script>

これにより、識別子が使用されているというエラーが発生します.
私が書いたコード!実行できません.
範囲(scope):変数が存在する範囲
同じフェーズにある場合は、無条件の競合のため、フェーズを変更する必要があります.

問題を解決する

~スキャン手順の変更方法~

インスタントコール関数による解析

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`하찌가 쓴 코드의 a는 ${a}다.`)
</script>

<!-- 내가 쓴 코드! -->
<script>
  (function () {
    const a = 20
    console.log(`내가 쓴 코드의 a는 ${a}다.`)
  })()
</script>

実行結果
ハッチが書いたコードのaは10です.
私が書いたコードaは20です.
現代ではそうする必要はありませんが、みんながそのようにしているので、このコードを使います.アイシャドウだけ描いた...ガタン...に印を押す

ブロックと関数ブロックを使用した解析

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`a는 ${a}이다.`)
  
  // 블록을 사용한 스코프 생성
  {
    const a = 20
    console.log(`a는 ${a}이다.`)
  }
  console.log(`a는 ${a}이다.`)
  
  // 함수 블록을 사용한 스코프 생성
  function sample() {
    const a = 30
  	console.log(`a는 ${a}이다.`)
  }
  sample()
  console.log(`a는 ${a}이다.`)
</script>

他のブロックに属するため、変数名の競合は発生しません.
実行結果
aは10です.
aは20です.
aは10です.
aは30です.
aは10です.
→コード運転時、ブロック内部に定数aが出力された場合、それぞれ20と30、外部出力10
影
同じ名前の変数がブロックに宣言されている場合、この変数は外部変数と衝突するのではなく、外部変数を隠す現象をシャドウと呼びます.

厳格モード

JavaScriptはフレキシブルなので、定数や変数を使わずに出力できます.以下のように...

<script>
  a = '하찌는'
  b = '귀엽다'

  alert(a + b)
</script>

実行結果

しかし実際には,これらのコードは定数であることも変数であることも知らず,多くのリスクを含んでいる.
だから.

<script>
  'use strict'
  a = '하찌는'
  b = '귀엽다'

  alert(a + b)
</script>

<script>ラベルの一番前に'use strict'文字列を置くと、コードが厳格にチェックされ、警告ウィンドウが出力されず、エラーが発生します.

協力するときに「use strict」と書いたので、他の人が書いたコードまで厳しくチェックされると、問題になるかもしれません.
だから.

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`하찌가 쓴 코드의 a는 ${a}다.`)
</script>

<!-- 내가 쓴 코드! -->
<script>
  (function () {
    'use strict'
    const a = 20
    console.log(`내가 쓴 코드의 a는 ${a}다.`)
  })()
</script>

インスタントコール関数を使用する場合、通常は上に入力します.
→この場合、厳密モードは、即時呼び出し関数内部でのみ動作します.