2.1.3 debounce

说明: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行

使用及参数说明:
xui.debounce(fn, await);
  • fn表示需要进行防抖的函数
  • await表示经过该时间后执行, 默认为300ms
  • 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

1.我们来想一下这个场景: 我们需要在用户输完用户名的时候去检测该用户名是否存在等等 我们怎么做呢? 像这样? 肯定是不行的, 首先这样会不停的触发异步请求, 服务器性能消耗过大

var tar = document.getElementById('debounce'),
    NUM = 0;
tar.addEventListener('keydown', function(e){
    //去执行一个异步来判断用户名是否已经注册
    NUM++;
    e.target.nextSibling.innerHTML = NUM;
},false);

2.那么使用防抖之后是怎样的呢? 用户停止输入后500ms, 再去执行异步方法检测用户名是否被注册

var name1 = document.getElementById('debounce1'),
    NUM1 = 0;
name1.addEventListener('keydown', 
    xui.debounce(function(e){
        NUM1++;
        e.target.nextSibling.innerHTML = NUM1;
    }, 500),false);

results matching ""

    No results matching ""