js_javascript スキルのコールバック関数の学習メモ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js_javascript スキルのコールバック関数の学習メモ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

折り返し電話

コールバック関数とは何ですか? この記事では、私が学習しているコールバック関数の例を学生に紹介します。さらに詳しく知りたい人は参考にしてください。

コールバック関数の原理:

今出発するので、到着したらお知らせします。」
これは非同期処理であり、「行きます」（関数実行）の処理中、「到着」（関数実行完了）「通知」（コールバック）の処理が実行されます。

例

1.基本的な方法

<script language="javascript" type="text/javascript">
function doSomething(callback) {
// … 
// Call the callback
callback('stuff', 'goes', 'here');
} 
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
} 
doSomething(foo); 
</script>

ログイン後にコピー

または匿名関数フォームを使用します

<script language="javascript" type="text/javascript">
 function dosomething(damsg, callback){
  alert(damsg);
  if(typeof callback == "function") 
  callback();
 } 
dosomething("回调函数", function(){
  alert("和 jQuery 的 callbacks 形式一样!");
 }); 
</script>

ログイン後にコピー

2. 高度な方法

JavaScript
のcallメソッドを使用する

<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
 
function foo() {
alert(this.name);
}
 
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Joe" via `foo`
</script>

ログイン後にコピー

パラメータを渡します

<script language="javascript" type="text/javascript"> 
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
} 
function foo(salutation) {
alert(salutation + " " + this.name);
} 
var t = new Thing('Joe');
t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
</script>

ログイン後にコピー

JavaScript の apply を使用してパラメータを渡します

<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
} 
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);
} 
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`
</script>

ログイン後にコピー

例

// 提供されたデータソースが特定の生徒のスコアである整数の場合、num<=0 の場合は最下層で処理され、n>0 の場合は上位層で処理されます。レイヤー。

//次の関数をコピーし、1.js として保存します

function f(num,callback){
 if(num<0) { 
 alert("调用低层函数处理!");
 alert("分数不能为负,输入错误!"); 
 }else if(num==0){
  alert("调用低层函数处理!");
 alert("该学生可能未参加考试！");
 }else{
 alert("调用高层函数处理!");
 callback();
 }
}

ログイン後にコピー

//次の test.html ファイルと 1.js を同じディレクトリに保存します:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="1.js" type="text/javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
 function test(){
  var p=document.getElementById("pp");
 pp.innerText="";
  var num=document.getElementById("score").value;
 f(num,function(){ //匿名高层处理函数
 if(num<60) alert("未及格！");
 else if(num<=90) alert("该生成绩优良！");
 else alert("该生成绩优秀!"); })
 pp.innerText="by since1978 qq558064!"
 }
</script>
</head>

<body>
<p>
回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。
</p>
请输入学生成绩<input type="text" id="score"> 
<input type="button" onClick="test()" value=" 看看结果">
<p id="pp"></p>
</body>
</html>

ログイン後にコピー

以下は他のネチズンからの追加です:

JavaScript のコールバックモード:

は次のようになります:

function writeCode(callback){ 
   //执行一些事物， 
   callback(); 
   //... 
  } 
 
  function intrduceBugs(){ 
   //....引入漏洞 
  } 
 
writeCode(intrduceBugs);

ログイン後にコピー

関数のアプリケーションを writeCode() に渡し、適切なタイミングで writeCode に実行させます (戻った後に呼び出されます)

最初にあまり良くない例を見てみましょう (後で再構築します):

//模拟查找页面中的dom节点，将查找到的节点存在数组里面统一返回 
  //此函数只用于查找不对dom节点做任何的逻辑处理 
  var findNodes = function(){ 
   var i = 100000;//大量的循环， 
   var nodes = [];//用于存储找到的dom节点 
   var found; 
   while(i){ 
    i -=1; 
    nodes.push(found); 
   } 
   return nodes; 
  } 
 
  //将查找找到的dom节点全部隐藏 
  var hide = function(nodes){ 
   var i = 0, 
    max = nodes.length; 
   for(;i<max;i++){ 
//findNodes后面有括号代表立即执行，先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ; 
nodes[i].style.display="none"
}

上面的方法是低效的，以为hide()必须再次遍历有findNodes()返回的数组节点，如何避免这种多余的循环呢。 
  我们不能直接在findNodes中对查询到的节点进行隐藏（这样检索就可修改逻辑耦合了），那么他就不再是一个通用函数了。 
  解决方法是用回调模式，可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数 
   var findNodes = fucntion(callback){ 
    var i = 100000, 
     nodes = [], 
     found; 
    //检查回调函数是否可用调用的 
    if(typeof callback !== 'function'){ 
     callback = false; 
    } 
    while(i){ 
     i -= 1; 
     if(callback){ 
      callback(found); 
     } 
     nodes.push(found); 
    } 
    return nodes; 
   } 
 
   //回调函数 
   var hide = function(node){ 
    node.style.display = 'none '; 
   } 
   //找到后续节点并在后续执行中对其进行隐藏 
 findNodes(hide);//先执行findNodes然后执行hide，当然回调函数也可以在调用主函数时创建：findNodes(function(node){node.style.display = 'none';});

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

Javaコールバック関数の書き方 Jan 09, 2024 pm 02:24 PM

Java コールバック関数の記述方法は次のとおりです: 1. インターフェイスコールバック、コールバックメソッドを含むインターフェイスを定義し、そのインターフェイスをコールバックをトリガーする必要があるパラメーターとして使用し、適切なタイミングでコールバックメソッドを呼び出します。匿名内部クラスコールバック、追加の実装クラスの作成を避けるために、匿名内部クラスを使用してコールバック関数を実装できます; 3. ラムダ式コールバック. Java 8 以降では、ラムダ式を使用してコールバック関数の作成を簡素化できます。

Java のコールバック関数の基本構文と応用 Jan 30, 2024 am 08:12 AM

Java コールバック関数の基本的な書き方と使用法の紹介: Java プログラミングでは、コールバック関数は一般的なプログラミングパターンです。コールバック関数を通じて、メソッドをパラメータとして別のメソッドに渡し、それによってメソッドの間接的な呼び出しを実現できます。コールバック関数の使用は、イベント駆動型、非同期プログラミング、インターフェイス実装などのシナリオで非常に一般的です。この記事では、Java コールバック関数の基本的な書き方と使い方を紹介し、具体的なコード例を示します。 1. コールバック関数の定義コールバック関数は、パラメータとして使用できる特殊な関数です。

Vue コンポーネント通信: コンポーネント通信にコールバック関数を使用する Jul 09, 2023 pm 07:42 PM

Vue コンポーネント通信: コンポーネント通信にコールバック関数を使用する Vue アプリケーションでは、情報を共有して相互に連携できるように、さまざまなコンポーネントが相互に通信できるようにする必要がある場合があります。 Vue はコンポーネント間の通信を実装するさまざまな方法を提供します。一般的な方法の 1 つはコールバック関数を使用することです。コールバック関数とは、関数を引数として別の関数に渡し、特定のイベントが発生したときに呼び出される仕組みです。 Vue では、コールバック関数を使用してコンポーネント間の通信を実装できるため、コンポーネントは

JavaScript のコールバック関数 (同期および非同期) の詳細な分析 Aug 04, 2022 am 10:05 AM

コールバック関数は、すべてのフロントエンドプログラマが知っておくべき概念の 1 つです。コールバックは、配列、タイマー関数、Promise、およびイベント処理で使用できます。この記事では、コールバック関数の概念について説明し、同期と非同期の 2 種類のコールバックを区別するのに役立ちます。

Golangでデータベースコールバック関数を使用するにはどうすればよいですか? Jun 03, 2024 pm 02:20 PM

Golang でデータベースコールバック関数を使用すると、次のことを実現できます。指定されたデータベース操作が完了した後にカスタムコードを実行します。追加のコードを記述せずに、個別の関数を通じてカスタム動作を追加します。コールバック関数は、挿入、更新、削除、クエリ操作に使用できます。コールバック関数を使用するには、sql.Exec、sql.QueryRow、または sql.Query 関数を使用する必要があります。

一般的な Python コールバック関数アプリケーションシナリオを分析する Feb 02, 2024 pm 09:34 PM

Python での一般的なコールバック関数アプリケーションシナリオの分析には、特定のコードサンプルが必要です。コールバック関数とは、プログラミングにおいて関数をパラメータとして別の関数に渡し、特定のイベントが発生したときにこのパラメータ関数を実行することを指します。コールバック関数は、非同期プログラミング、イベント処理、GUI プログラミングなどの分野で広く使用されています。この記事では、Python での一般的なコールバック関数のアプリケーションシナリオを分析し、関連する具体的なコード例を示します。非同期プログラミング非同期プログラミングでは、非同期タスクの結果を処理するためにコールバック関数がよく使用されます。消費を実行する必要がある場合

イベント駆動型プログラミングにおける Java コールバック関数の応用分野 Feb 01, 2024 am 09:07 AM

イベント駆動型プログラミングにおける Java コールバック関数の応用コールバック関数の概要コールバック関数は、イベントまたは操作の発生後に呼び出される関数です。これはイベント駆動型プログラミングでよく使用され、イベントの発生を待機している間プログラムがブロックされます。イベントが発生すると、コールバック関数が呼び出され、プログラムは実行を継続できます。 Java では、コールバック関数はインターフェイスまたは匿名の内部クラスを通じて実装できます。インターフェイスは、あるクラスが別のクラスの実装を可能にする関数シグネチャを定義するためのメカニズムです。

C++ 関数ポインターとコールバック関数の比較 Apr 18, 2024 pm 12:06 PM

関数ポインターとコールバック関数はどちらもコールバックメカニズムを実装するためのツールです。関数ポインタはコンパイル時に作成され、変更できず、明示的に呼び出す必要があります。コールバック関数は実行時に作成され、異なる関数に動的にバインドして、コールバック関数によって自動的に呼び出すことができます。したがって、関数ポインターは静的コールバックに適しており、コールバック関数は動的コールバックに適しています。

See all articles

js_javascript スキルのコールバック関数の学習メモ

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック