【讨论】实时监听input的输入并异步传输交换数据的优化设计

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<div>请输入关键字：<input id="keyWords" type="text" /></div>

<div id="getSearch"></div>

<script type="text/javascript">

    var sInput = $('#keyWords'), timer;

    sInput.focus();



    sInput.on('input', function () {

        clearTimeout(timer);

        timer = setTimeout(function () {

            $('#getSearch').append('<p>' + $('#keyWords').val() + '</p>');

        }, 250);

    });



    if (document.all) {

        $('#keyWords').each(function () {

            var that = this;



            if (this.attachEvent) {

                this.attachEvent('onpropertychange', function (e) {

                    if (e.propertyName != 'value') return;

                    $(that).trigger('input');

                });

            }

        })

    }

</script>

上面的代码主要是监听用户对文本框的输入情况，可应用在各种ajax数据交换的功能上。

不过由于服务器的性能不同、客户端的环境不同、客户输入速度的不同，可能会有不同的用户体验，对于数据量较大的网站，当用户输入的结果进行异步请求并返回数据的时间可能会比较长，如果用户输入速度较快，可能会导致数据还未返回又再一次的被提交上去，有时会出现页面假死状态。

监听文本框使用setTimeout来延迟程序的执行时间，虽然也是一个不错的办法，但是也会降低一点用户体验，就是感觉返回结果慢了一点。

我的想法是监听用户输入完毕再执行代码，不过要如何监听用户是否输入完毕这个就比较难实现了，或者使用xml数据，不过对数据量大的情况还不是很好解决。

欢迎大家来讨论怎样才能设计出最佳的代码，拥有最佳的用户体验！能够提供案例最好。
------解决方案--------------------
都在js里处理还行，每输一个字符就ajax请求这不是个好办法，
想办法看能不能只在js客户端处理
------解决方案--------------------
实时的是最差的方案。

输入不是瞬间完成的。
------解决方案--------------------
你的代码中哪里有“提交服务器”的部分？


------解决方案--------------------

引用:

监听文本框使用setTimeout来延迟程序的执行时间，虽然也是一个不错的办法，但是也会降低一点用户体验，就是感觉返回结果慢了一点。/quote]
延迟250毫秒感觉慢了么？

Quote: 引用:

 我的想法是监听用户输入完毕再执行代码，不过要如何监听用户是否输入完毕这个就比较难实现了

如果用户停顿了并且就想立刻看到帮助信息，那么你的代码就是非常正确的实现。给用户即时列表（Autocomplete），根本不是“在用户输入完毕”时刻的行为，而是用户录入过程“当中”的行为。

引用:

或者使用xml数据，不过对数据量大的情况还不是很好解决。

看不懂这是什么意思。有些人奢谈“xml”这个词儿，这并不比谈论“json”这个词儿高明，这只是普通地传送数据而并不是什么有特定技术含量的事情。所以通常莫名其妙地蹦出一个“xml”的概念的讨论都是无意义的。