站内搜索:
首页 >> 前端 >> 内容
如何优化input中change事件做的搜索功能?

时间:2017/11/29 14:05:52

很多时候我们都会利用 input 的 change 事件做搜索功能,如果触发 change 事件不做处理就直接去请求数据或者处理数据会做很多次操作,所以我们在 change 事件里面需要做个处理减少数据的请求或处理次数。

    var searchTimeout,
        delayTime = 400,
        submitSearch = function() {
            // do something ...
        };

    // 搜索
    $(searchInput).change(function () {
        // 存在定时器则清除定时器
        !!searchTimeout && clearTimeout(searchTimeout);
        // 重新设置定时器
        searchTimeout = setTimeout(submitSearch, delayTime);
    });

思路就是利用定时器做个延迟的搜索,这样输入相隔时间小于 delayTime 的时候不会去处理搜索,当输入完成再去处理搜索。

  • 上一篇:npm怎么修改源?修改后如何测试?
  • 下一篇:创建本地工程文件和网络映射方式讲解
  • 返回顶部