Javascript - الحدث الذي سيتم استخدامه لتغيير التحديد المتعدد

Question

أنا أستخدم YUI كإطار عمل جافا سكريبت، ويمكنني التفاعل بنجاح عندما يقوم المستخدم بتغيير قيمة حقول الإدخال الأساسية، ويكون رد الفعل هو إرسال استعلام Ajax.

ومع ذلك، فأنا لست محظوظًا جدًا بالقوائم المنسدلة متعددة التحديد:

• سيؤدي الاستماع إلى "التغيير" إلى إرسال استعلامي في كل مرة يقوم فيها المستخدم بإضافة/إزالة عنصر إلى اختياره
• يتطلب الاستماع إلى "التمويه" من المستخدم النقر في مكان آخر لفقد التركيز وإرسال الاستعلام (غير قابل للاستخدام جدًا)، بالإضافة إلى أنه سيرسل الاستعلام إذا قام المستخدم بالتمرير فقط في القائمة دون تغيير أي شيء (عديم الفائدة ومربك).

أي فكرة (مع YUI)، من شأنها أن تستخدم سلوكًا ذكيًا؟أم هل يجب أن أستمع حقًا للتغيير وتنفيذ المهلة (لانتظار التغييرات اللاحقة قبل إرسال استعلام)؟

Answer 1

أستخدم نفس نوع المهلة التي تريدها في الأحداث الرئيسية، لاكتشاف متى انتهى المستخدم من الكتابة، ويمكن استخدام نفس الأسلوب في مشكلتك:

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

الاستخدام:

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

في الأساس في هذا timeout الوظيفة، أقوم بإعادة ضبط المؤقت إذا تم استدعاء الوظيفة قبل التأخير المحدد.

Answer 2

يمكنك تشغيل setTimeout بعد حدث onChange وتتبع عددًا من التغييرات لتحديد ما إذا كان قد تم إجراء تغيير منذ إطلاق الحدث أم لا.إذا لم يتم إجراء أي تغييرات خلال ذلك الوقت، فيمكن إرسال الاستعلام.

على سبيل المثال، شيء من هذا القبيل:

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}