36

私はループしているforループを持っています。

カスタムモーダルを作成し、応答を待ってから続行したいと考えています。

どうすればこれを達成できますか？コールバックを待たなければならないことはわかっています。

この例のように:

 for(var x in array){
            alert(x);
            console.log(x);
        }

それはまさに私がやりたいことをします。しかし、私は3つのボタンが欲しいです。ただし、アラートはjavascriptの一部ではありません（？ブラウザにあります。）

それで、皆さん、アイデアはありますか？

私はこのようなことを考えていました：

var run = true;
function foo(){
    if (run){
        setTimeout(foo, 500);
    }
}

function stop(){
    run = false;
}

foo();

次に、続行する前にボタンのクリックを呼び出す停止を待ちます。しかし、これは本当に良い習慣でしょうか?

または、ラムダ関数を customAlert のパラメーターとして使用し、「グローバル」変数を使用して、通過する配列の現在の位置を保持し、関数でこれを行います。同様に、配列がまだ X より大きいキーを保持しているかどうかを確認します。次に、関数を再度実行し、そのたびにグローバル X を増やします。

コードを提供してくれた lostsource に感謝します。無名関数内で単に lostsource のソリューションを使用するだけなので、グローバル変数は取得しません。優秀な。

(function(){

})();
4

2 に答える 2

88

これがあなたの配列であると仮定します

var list = ['one','two','three'];

このループ/コールバック アプローチを使用して試すことができます

var x = 0;
var loopArray = function(arr) {
    customAlert(arr[x],function(){
        // set x to next item
        x++;

        // any more items in array? continue loop
        if(x < arr.length) {
            loopArray(arr);   
        }
    }); 
}

function customAlert(msg,callback) {
    // code to show your custom alert
    // in this case its just a console log
    console.log(msg);

    // do callback when ready
    callback();
}

使用法：

// start 'loop'
loopArray(list);

JSFiddle はこちら: http://jsfiddle.net/D9AXp/

于 2013-01-18T22:47:43.260 に答える
4

MaggiQall、私はあなたが答えを持っていることを知っていますが、私はあなたや他の誰かに興味があるかもしれない柔軟な解決策を持っています。

このソリューションは、jQuery（1.7以降）とjQuery UIに依存してdialogいますが、jQueryプラグインとしてではなく、配列プロトタイプのカスタムメソッドとして実装されています。

Arrayメソッドは次のとおりです。

Array.prototype.runDialogSequence = function(dialogCallback, startIndex, endIndex){
    startIndex = Math.max(0, startIndex || 0);
    endIndex = Math.min(this.length - 1, endIndex || this.length - 1);
    var sequenceIndex = 0,
        arr = this,
        dfrd = $.Deferred().resolve(startIndex);
    function makeCloseFn(seqData){
        return function(event, ui){
            if(seqData.continue_) { seqData.dfrd.resolve(seqData.arrayIndex+1, seqData); } //continue dialog sequence
            else { seqData.dfrd.reject(seqData.arrayIndex, seqData); } //break dialog sequence
        }
    }
    $.each(this, function(i){
        if(i < startIndex || i > endIndex) { return true; }//continue
        dfrd = dfrd.then(function(arrayIndex){
            var seqData = {
                dfrd: $.Deferred(),
                arrayIndex: arrayIndex,
                sequenceIndex: ++sequenceIndex,
                length: 1 + endIndex - startIndex,
                item: arr[arrayIndex],
                continue_: false
            };
            dialogCallback(seqData).on("dialogclose", makeCloseFn(seqData));
            return seqData.dfrd.promise();
        });
    });
    return dfrd.promise();
}

Array.runDialogSequence()依存している ：

  • ドキュメントの本文にあるダイアログテンプレート。テキスト/値を入力するのに適しています。
  • ダイアログにデータを入力するために必要なデータを順番に含む類似アイテム（通常はjavascriptオブジェクト）の配列。
  • 最初の引数として、正しく構築された「openDialog」関数を渡します。

説明コメント付きのサンプル「openDialog」関数を次に示します。

function openDialog(seqData){
    /*
    seqData is an object with the following properties:
        dfrd: A Deferred object associated with the current dialog. Normally resolved by Array.runDialogSequence() to run through the sequence or rejected to break it, but can be resolved/rejected here to force the dialog sequence to continue/break. If resolved, then pass (seqData.arrayIndex+1, seqData), or custom values. If rejected, typically pass (seqData.arrayIndex, seqData).
        arrayIndex: The current array index.
        sequenceIndex: The current index within the sequence. Normally the same as arrayIndex but Differs when a non-zero startIndex is specified.
        length: The full length of the dialog sequence.
        item: The current item from the array.
        continue_: (false) Set to true to allow the sequence to continue.
    */
    var item = seqData.item;
    var $d = $("#d");
    $d.dialog({
        title: 'Dialog (' + seqData.sequenceIndex + ' of ' + seqData.length + ')',
        modal: true,
        buttons: {
            "Continue": function(){
                seqData.continue_ = true;//set to true before closing to go to next dialog.
                $(this).dialog("close");
            },
            "Cancel": function(){
                $(this).dialog('close');//closing with seqData.continue_ set to its default value false will break the dialog sequence.
            }
        }
    }).find("#message").text(item);//Typically you will do a lot more here to populate the dialog with item data.
    return $d;//openDialog() must return a dialog container, jQuery-wrapped.
}

Array.runDialogSequence()jQueryを返し、promiseダイアログシーケンスが完了したとき（done関数）または途中で中断したとき（fail関数）にカスタムアクションを実行できるようにします。

ここにいくつかのサンプル呼び出しがあります：

//Simplest possible
$("#myButton1").click(function(){
    myArray.runDialogSequence(openDialog);
});

//Call with custom startIndex and endIndex, and chanined `.then()` to provide custom actions on break/completion.
$("#myButton2").click(function(){
    myArray.runDialogSequence(openDialog, 1, 3).then(function(i, seqData){
        alert('All dialogs complete - last item = "' + seqData.item + '"');
    }, function(i, seqData){
        alert('Dialog sequence was broken at item ' + i + ' "' + seqData.item + '"');
    });
});

デモ

これは、私の想像が許す限り、一般化された解決策に近いものです。

于 2013-01-21T02:10:41.557 に答える