keypress、keyup、keydown事件频繁执行优化

最新推荐文章于 2024-04-09 10:22:13 发布

原创最新推荐文章于 2024-04-09 10:22:13 发布 · 6.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#高频执行 #javascript #keypress #keyup #keydown

前端专栏收录该内容

243 篇文章

订阅专栏

本文介绍了一种针对输入框自动补全功能的优化方案，通过限制请求频率减少对服务器的压力，并提供了一个具体的实现示例。

前言

某日需要针对某个输入框做自动补全，但是后来发现输入一个汉字输入几个英文字母的时候也会因为敲入每个英文都会触发事件一次，这种方式非常不好，对服务端的压力太大了，于是这里做一下处理。

截图

这里写图片描述

解决方案

思路，延迟执行


/*****这里按照一定频率执行某个时间。*****/
UiUtil.BindEvent=function(_opts){
    var _settings={
        timeSep:100 //执行的时间间隔。
        ,element:""
        ,eventType :"click"//要绑定的事件类型。
        ,callback:function(event){}
    };

    $.extend(_settings,_opts);
    var _element=$(_settings.element);
    _settings.timeSep=parseInt(_settings.timeSep);

    var _time_out=null;
    _element.bind(_settings.eventType,function(event){


        if(_time_out!=null){

            clearTimeout(_time_out);
            _time_out=null;
            _time_out=setTimeout(function(){

                _settings.callback(event);
                clearTimeout(_time_out);
                _time_out=null;
            },_settings.timeSep);
        }
        else{

            _time_out=setTimeout(function(){

                _settings.callback(event);
                clearTimeout(_time_out);
                _time_out=null;
            },_settings.timeSep);
        }
    });

}