Bagaimana Anda menghentikan fungsi dalam javascript?

Question

Selamat datang di tutorial tentang cara membatalkan eksekusi Javascript. Perlu menghentikan skrip secara manual karena alasan tertentu?

Javascript sisi klien tidak memiliki fungsi batalkan asli, tetapi ada berbagai alternatif untuk membatalkan eksekusi Javascript

Dalam suatu fungsi, cukup return false atau

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

0

Secara manual

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

1 dalam suatu fungsi

Tetapkan fungsi untuk dijalankan pada pengatur waktu –

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

2. Kemudian bersihkan untuk berhenti –

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

3

Jalankan skrip dengan pekerja yang dapat dihentikan

Gunakan

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

_4 untuk mencegah halaman memuat dan berjalan

Hanya untuk NodeJS – Gunakan

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

5 atau

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

6

Tapi bagaimana cara kerja masing-masing metode? . Baca terus untuk mencari tahu

ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

TLDR – SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

BATALKAN EKSEKUSI JAVASCRIPT

Baiklah, sekarang mari kita membahas semua metode yang mungkin untuk menghentikan atau membatalkan eksekusi Javascript

METODE 1) KEMBALIKAN FALSE

1-kembali. js

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0; 
  i++;
 
  // (B) ABORT - RETURN "UNDEFINED"
  if (i != 0) { return; }
 
  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}
 
// (D) FIRE TEST()
let i = test();
console.log(i);
 
// (E) BEST TO HANDLE THE ABORTION GRACEFULLY
if (i==undefined) { 
  // HANDLE ABORT 
}

Ini adalah salah satu cara paling anggun dan “non-peretas” yang akan saya rekomendasikan untuk digunakan – Hanya return false atau

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

8 dalam fungsi. Itu harus sangat mudah dan mudah dimengerti, bahkan untuk pemula

P. S. Anda mungkin juga ingin menangani apa yang terjadi setelah aborsi. Mungkin menampilkan pesan "kesalahan" atau semacamnya

METODE 2) THROW PENGECUALIAN

2-kesalahan. js

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

Selanjutnya, ini adalah metode "populer" yang saya temukan di Internet. Yap, memang funky untuk melemparkan "kesalahan" padahal itu sebenarnya bukan kesalahan .. Tapi ini adalah cara yang dijamin untuk membatalkan dan menghentikan skrip melanjutkan lebih jauh. Untuk tidak "menghancurkan" skrip sama sekali, disarankan untuk menggunakan blok

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

9 untuk menangani hal-hal dengan anggun - Mungkin menunjukkan kepada pengguna pemberitahuan "skrip dibatalkan"

P. S. Saya masih akan merekomendasikan menggunakan

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

_0 atau

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

1 di atas sebagai gantinya - Ini "lebih lembut" dan "benar secara logis"

METODE 3) TIMER BERHENTI

3-timer. js

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

Ini adalah satu lagi yang saya temukan di Internet. Seluruh ide dari metode ini adalah untuk meletakkan skrip pada pengatur waktu, dan cukup panggil

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

2 untuk membatalkannya. Meskipun berfungsi, itu juga tidak berguna kecuali Anda memiliki skrip yang berjalan dalam satu lingkaran atau pengatur waktu…

METODE 4) PEKERJA DIHENTIKAN

4A) APA ITU PEKERJA?

Untuk Anda ninja kode pemula yang belum pernah mendengar pekerja – Ini pada dasarnya adalah cara Javascript untuk melakukan multithreading, memungkinkan skrip berjalan di latar belakang, memungkinkan banyak skrip berjalan secara paralel. Jika Anda ingin mempelajari lebih lanjut, saya akan meninggalkan tautan ke tutorial pekerja saya yang lain di bagian ekstra di bawah ini

4B) Naskah Utama

4a-utama. js

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

SKRIPT PEKERJA

4b-pekerja. js

// (A) START ONLY WHEN DATA RECEIVED
onmessage = evt => {
  // (B) DATA RECEIVED
  console.log("Worker has received data and started.");
  console.log(evt.data);
 
  // (C) DO PROCESSING HERE
  // ...
 
  // (D) REPLY RESULT
  postMessage({
    status: 0,
    message: "OK"
  });
};

PENJELASAN

Pekerja agak membingungkan pada pandangan pertama, tapi itu benar-benar berfungsi seperti panggilan AJAX – Ada 2 bagian di dalamnya, skrip utama

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

3 dan skrip pekerja

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

4

Pertama, kita mulai dengan membuat pekerja baru

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

5 di skrip utama

Perhatikan bahwa skrip pekerja tidak memiliki akses ke pohon DOM. Saya. E.

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

6 tidak akan bekerja di

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

4

Inilah mengapa kami harus mengirim data ke pekerja di skrip utama –

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

8

Selanjutnya dalam skrip pekerja, kami mulai memproses hanya ketika data diterima –

// (A) SET TIMER & RUN
var timer = setInterval(
  () => console.log("Running"), 3000
);
 
// (B) "FORCE" ABORT IMMEDIATELY
clearInterval(timer);
 
// (C) OR SET A "TIMEOUT"
setTimeout(() => {
  clearInterval(timer);
  console.log("Stopped");
}, 1000);

9

Saat pekerja selesai, ia mengembalikan pesan kembali ke skrip utama –

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

0

Terakhir, kembali ke skrip utama, kami menangani saat pekerja selesai –

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

1

Adapun bagian terbaiknya, kami dapat menggugurkan pekerja kapan saja menggunakan

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

2

METODE 5) JENDELA BERHENTI

0-utama. html

<script src="5a-stop.js"></script>
<script src="5b-stop.js"></script>

5a-berhenti. js

// (A) DO YOUR STUFF
var first = 123;
var second = 456;
var third = first + second;
console.log(third);
 
// (B) STOP LOADING
window.stop();
console.log("This will still run...");

5b-berhenti. js

console.log("THIS WILL NOT RUN");

Cukup gunakan

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

_4 untuk menghentikan pemuatan halaman lainnya… Yap, ini berfungsi, dan akan menghentikan semua skrip lain untuk memuat/menjalankan. Tapi seperti yang sudah Anda duga, ini juga akan menghentikan halaman HTML dari pemuatan penuh. 😐 Tidak terlalu berguna, kecuali jika Anda ingin melakukan "rem darurat"

METODE 6) NODE JS ABORT and EXIT

6-batalkan. js

// THIS IS FOR NODEJS ONLY
// (A) DO YOUR STUFF
var first = 123;
var second = 456;
var third = first + second;
console.log(third);
 
// (B) ABORT OR EXIT
// ABORT = IMMEDIATE (ROUGH)
// EXIT = AS QUICKLY AS POSSIBLE (GRACEFUL)
// process.abort();
process.exit();
console.log("THIS WILL NOT RUN");

Ini hanya untuk NodeJS, gunakan fungsi

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

5 dan

function test () {
  // (A) DO YOUR STUFF AS USUAL
  console.log("Test started");
  let i = 0;
  i++;

  // (B) ABORT - THROW ERROR
  if (i != 0) {
    throw new Error("Manual Abort Script"); 
  }

  // (C) RETURN RESULT IF OK
  console.log("This part will not run");
  return i;
}

// (D) BEST TO TRY-CATCH FOR A GRACEFUL SCRIPT
try { 
  let x = test(); 
} catch (err) { 
  console.log(err); 
}

6 untuk menghentikan eksekusi. Perbedaan di antara mereka adalah bahwa

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

_6 akan segera berhenti, dan

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

7 akan berhenti secepat mungkin… Artinya,

// (A) CREATE NEW WORKER
var theWorker = new Worker("4b-worker.js");
 
// (B) WHEN THE WORKER IS DONE
theWorker.onmessage = evt => {
  console.log("Worker script has completed.");
  console.log(evt.data);
};
 
// (C) SEND DUMMY DATA TO WORKER
// ! WORKER SCRIPT CANNOT ACCESS DOM DIRECTLY !
theWorker.postMessage({
  Name : "John Doe",
  Email : "[email protected]"
});
 
// (D) ABORT AND TERMINATE WORKER
// theWorker.terminate();

7 lebih anggun dengan pembersihan, dan bukan tiba-tiba “hentikan semuanya”

BIT & LINK EKSTRA

Itu saja untuk panduan ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

LINK dan REFERENSI

Bagaimana cara menghentikan skrip dalam JavaScript?
Bagaimana cara menghentikan eksekusi suatu fungsi dengan JavaScript?
Multithreading Javascript – Pekerja Untuk Pemula – Kotak Kodex
Pemberhentian Pekerja – MDN
Kesalahan – MDN
. – NodeJS
Jendela. berhenti() – MDN

VIDEO TUTORIAL

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana Anda mengakhiri suatu fungsi?

Pernyataan akhir adalah baris terakhir dari program atau fungsi . Pernyataan stop atau return digunakan untuk terminasi normal dan exit digunakan untuk terminasi abnormal.

Bagaimana Anda menghentikan suatu fungsi dengan segera?

Terkadang saat Anda berada di tengah-tengah suatu fungsi, Anda ingin cara cepat untuk keluar. Anda dapat melakukannya menggunakan kata kunci return . Setiap kali JavaScript melihat kata kunci kembali, itu segera keluar dari fungsi dan variabel apa pun (atau nilai) yang Anda berikan setelah pengembalian akan dikembalikan sebagai hasilnya.

Bagaimana cara menghentikan suatu fungsi setelah beberapa waktu di JavaScript?

Bagaimana Cara Menghentikan Eksekusi? . Jendela. metode clearTimeout() dapat ditulis tanpa awalan jendela. The clearTimeout() method stops the execution of the function specified in setTimeout(). The window.clearTimeout() method can be written without the window prefix.

Apakah ada fungsi keluar di JavaScript?

Dalam JavaScript, ketika Anda menggunakan Exit dalam fungsi yang ditentukan pengguna dalam sebuah kebijakan, ia keluar dari seluruh kebijakan . Jika Anda ingin menghentikan suatu fungsi dalam kebijakan JavaScript, Anda harus menggunakan perintah return dalam kebijakan tersebut.

kode javascript