2

GoInstantと同期しているテキスト領域があります。コードは次のようになります。

var myRoom = platform.room('myRoom');
var myKey = myRoom('myKey');

// Listen to set events on the platform key and update a textarea
myKey.on('set', function(textAreaContent) {
  $('textarea').val(textAreaContent);
});

// When the textarea changes, set the platform key
$('textarea').on('change', function(){
  var textAreaContent = $(this).val();
  myKey.set(textAreaContent, function(err) {
    if (err) throw err;
  });
})

これにより、1 つのテキスト フィールドを更新するときに無限ループが作成されます。つまり、テキストエリアの値を変更すると、プラットフォーム キーの更新がトリガーされ、テキストエリアの値が無限に変更されます ...

編集:トップの回答に基づいて、次のコンストラクターを思いつきました:

function BounceProtection() {
  var remoteUpdate = false; // remote toggle
  this.local = function(cb) {
    if (remoteUpdate) return;
    cb();
  };
  this.remote = function(cb) {
    remoteUpdate = true;
    cb();
    remoteUpdate = false;
  };
}

このようにして、js の非同期性でも複数のキーを保護するために、必要に応じて bounceProtection オブジェクトを生成できます。

var myKeyBP = new BounceProtection();
4

3 に答える 3

5

無限伝搬ループを回避する簡単な方法:

// Infinite loop prevention
var bounceProtection = {
  remoteUpdate: false, // remote toggle
  local: function(cb) {
    if (this.remoteUpdate) return;
    cb();
  },
  remote: function(cb) {
    this.remoteUpdate = true;
    cb();
    this.remoteUpdate = false;
  }
};

var myRoom = platform.room('myRoom');
var myKey = myRoom.key('myKey');

myKey.on('set', function(textAreaContent) {
  bounceProtection.local(function() {
    $('textarea').val(textAreaContent);
  });
});

$('textarea').on('change', function(){
  var textAreaContent = $(this).val();
  bounceProtection.remote(function() {
    myKey.set(textAreaContent, function(err) {
      if (err) throw err;
    });
  });
});
于 2013-07-17T13:17:56.237 に答える
1

テキストエリアを編集する前にリスナーを削除してから再適用するだけです（トリガーされたイベントごとにDOMを検索しないように、テキストエリアもキャッシュしました）。

また、テキストエリアに ID 属性を指定することをお勧めします。これは、1 つのテキストエリアで作業しているように見えますが、ページに別のテキストエリアを追加することで非効率的で簡単に壊れるタグ検索を行っているように見えるからです。

var myRoom = platform.room('myRoom');
var myKey = myRoom('myKey');

var $textarea = $('textarea');

function setKey() {
  var textAreaContent = $(this).val();
  myKey.set(textAreaContent, function(err) {
    if (err) throw err;
  });
}

// Listen to set events on the platform key and update a textarea
myKey.on('set', function(textAreaContent) {
  $textarea.off('change', setKey); // Remove listener
  $textarea.val(textAreaContent);
  $textarea.on('change', setKey); // Reapply listener
});

// When the textarea changes, set the platform key
$textarea.on('change', setKey);
于 2013-07-17T13:29:09.060 に答える