巧用setTimeout和clearTimeout 对输入事件进行优化处理

项目背景

前一阵做了一个需求，大概是用户在输入框输入URL链接时，前端需要对链接实时搜索并与后台数据库匹配。如果发现链接是通过我们的工具箱生成落地页的，就可以接着选择该落地页链接匹配的转化事件，进行后续广告的出价设置。

问题描述

如果按照常规的处理，就是输入框input组件加个类似onkeydown这种监听事件，如果事件一被调用，就触发请求。但是这会有个弊端，用户通常打字很快，远比服务端的响应要快的多。如果onkeydown一触发就调用请求，会造成发送很多不必要的请求，造成服务端压力过大。所以比较好的情况是，在用户暂停输入的时候，用最新的input输入值来调用请求。

解决技巧

利用setTimeout(callback, milliseconds) 和 clearTimeout(timeout)来解决

• setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。其返回值是一个Number,代表timer的ID。
• clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

首先我们定义一个timeoutURL变量

// An highlighted block
let timeoutURL = null;

之后利用setTimeout及clearTimeout优化onChange函数。每当用户输入变化的时候，onLandingPageUrlChange函数会被调用。这