async forEach（）を作成する

Question

私は現在、ページのすべてのリンクをチェックし、壊れたリンクを強調するスクリプトを作成しています。同期的に、これは大きな仕事ではありませんでしたが、私はAsynchとの作業を開始したばかりですので、私のコードの助けがあれば大歓迎です。

var size = 0; 
var itemsProcessed = 0; 
    console.log("Size: " + size); 

function linkCheck() { 
var body = document.querySelectorAll("*"); 
var checker = Array.from($(body).filter("a")); 
size = (Object.keys(checker).length); 

    console.log("Size: " + size); 
var list; 

checker.forEach(function (anchor) { 
    var link = $(anchor).attr("href"); 
    itemsProcessed++; 
    console.log("Items: " + itemsProcessed); 
    if (itemsProcessed == size) { 
     colorUp(list); 
    } 
    var req = new XMLHttpRequest(); 
    req.open('HEAD', $(checker).attr("href"), true); 
    itemsProcessed++; 
    try { 
     req.send(null); 
    } catch (e) { 
     console.log("ERROR"); 
     return true; 
    } 
    console.log(req.status); 
    var data = (req.status !== 200); 
    if (data) { 
     //console.log("Added to List") 
      list += data; 
    } 
    console.log(link, data); 
}); 
} 

function colorUp(list) { 
console.log("DONE"); 
$(list).css({ 
    "border": "3px solid #ffb700", 
    "background": "repeating-linear-gradient(135deg, #FFE0B2, #FFE0B2 5px, #ffffff 5px, #ffffff 10px)" 
}); 
} 


linkCheck(); 

現在、私ははforEachが終了するのを待っている問題が発生したんだけど、あなたが何か提案、または私は、問題をより明確にするために何かできることがある場合は、ポストを残して自由に感じます！あなたは、彼らはあなたがreduceアレイ方式を使用する必要があります終えた後、次々と実行して、何かをする要求の数を待つ必要がある場合は

はみんな

Answer 1

ありがとうございます。

checker.reduce((promise, anchor) => { 
    return promise.then(() => $.ajax({type: "HEAD", url: $(anchor).attr("href")})); 
}, $.Deferred().resolve()).then(responseFromLastRequest => { 
    // Do your stuff here  
}); 

それとも、あなたは要求の順序を気にしないならば、あなたはそれらを同時に実行することができます。

$.when.apply($, checker.map(anchor => { 
    return $.ajax({type: "HEAD", url: $(anchor).attr("href")}); 
})).then(() => { 
    // Do your stuff here 
}); 

Answer 2

が言われたとおり、XMLHttpRequestをして作業することは楽しいではありません。ここでは、jQueryを活用した完全な例を示します。プロミスについての調査を行うことは確かに良いアイデアですが、仕事でそれを見ることは、初心者の方が良いかもしれません。

function linkCheck() { 
    var itemsProcessed = 0; 

    var $checker = $('a'); 
    var size = $checker.length; 
    console.log("Size: " + size); 

    var $list = $(); 

    $checker.each(function (anchor) { 
     var link = $(anchor).attr("href"); 
     itemsProcessed++; 
     $.ajax(link, { 
      type: 'HEAD', 
      success: function (response, status, xhr) { 
       var data = (req.status !== 200); 
       if (data) { 
        $list.pushStack([anchor]); 
       } 
       console.log(link, data); 
      }, 
      error: function (xhr, err) { 
       console.log("ERROR"); 
      }, 
      complete: function() { 
       console.log(req.status); 
       console.log("Items: " + itemsProcessed); 
       if (itemsProcessed == size) { 
        colorUp(); 
       } 
      } 
     }); 
    }); 
} 

function colorUp() { 

    console.log("DONE"); 
    $(list).css({ 
     "border": "3px solid #ffb700", 
     "background": "repeating-linear-gradient(135deg, #FFE0B2, #FFE0B2 5px, #ffffff 5px, #ffffff 10px)" 
    }); 
} 


linkCheck(); 

$.ajax(url, settings)関数は、2番目のパラメータとしての応答を待っている」プロセスを操舵オブジェクトを取ります。これは、linkCheck()関数が終了した後のある時点で非同期に実行される一連の関数を定義します。サーバからの応答後

いずれか、到着complete機能が実行されることを後successために記載されている機能またはerrorプロパティに記載されている一つが、実行され、両方の場合においてれます。

覚えておくべき主なポイントは、sendという種類の関数を定義すると、元の関数は答えを待たずに実行に移ります。応答が得られたときに何かしたいのであれば、それをクロージャーで定義する必要があります。