项目背景

前一阵做了一个需求，大概是用户在输入框输入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函数会被调用。这个函数做的第一件事就是，不管之前的timeout有没有运行到，清除之前的timeout。第二件事，设置一个新的timeout, 在500毫秒之后，发送网络请求来获取落地页url对应的转化跟踪事件 — fetchlandingPageURLConvertActions。

在用户输入很快的情景下，例如50毫秒触发一次，onLandingPageUrlChange在每次调用时，会将还没运行到的timeout清除，并以最新的value值，重新发起一个新的setTimeout。从而避免了频繁的网络请求。

onLandingPageUrlChange = (value, isInnerUrl) => {if (isInnerUrl) {// 需要把链接发给后台 获取转化行为clearTimeout(timeoutURL);// 防止不停地发请求timeoutURL = setTimeout(() => {this.props.fetchlandingPageURLConvertActions(value);}, 500);}

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

Silverlight开发历程—（输入事件和非输入事件）
Silverlight事件主要分为输入事件和非你输入事件两个种类. 输入事件主要指鼠标.键盘等你输入设备的事件:非输入事件指对象生存期的改变以及状态的改变等.我们这篇文章主要讲输入事件,至于事件的功能 ...
我之理解---计时器setTimeout 和clearTimeout
今天在写个图片切换的问题有动画滞后的问题,才动手去查setTimeout 和clearTimeout.之前写的图片播放器也有类似的问题,有自动start按钮和stop按钮, 其他都正常,问题出在每 ...
input 输入事件_输入超时为例学习 Python 的线程和协程
需求:做一个程序等待用户输入,3秒内输入则会 echo 这个输入并立即退出.3秒内没输入则自动退出. 实现方法: 1. 线程(错误示范) import 首先启动两个线程,并把等待输入的 get_inp ...
关于Stateflow中chart输入事件的激活
文章目录 1. 问题描述 2. 问题分析 2.1 官方链接 2.2 文档值得留意的地方 2.2.1 Activate a Stateflow Chart by Using Edge Triggers ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
Android输入事件InputReader和InputDispatcher分析
输入事件分发流程: 1.InputReader 线程通过 EventHub 监听 /dev/input 内的文件 2.InputReader 得到输入事件,封装后存入 InputDispatcher ...
Android输入事件从读取到分发三：InputDispatcherThread线程分发事件的过程
分析完事件的读取后,东忙西忙,不知不觉已过去了快五个月了-也不是说没有时间把这部分源码分析完,而是实在是分析不下去,因此转战到其他地方去了.然而这一块始终是心头那不舍的惦记,经过一段时间的沉淀,又参考 ...
Unity可视化编程Visual Scripting学习笔记5：2D围绕一点正转反转（输入事件）
总览 KanXiang QianJin 1.看向目标需要一个一个参数:目标 2.横向移动需要一个参数:速度 3.横向移动速度乘-1实现反向移动 3.1添加输入事件 · 这里选择按下空格的瞬间为触 ...
Android 输入事件一撸到底之View接盘侠（3）
前言系列文章 1.Android 输入事件一撸到底之源头活水(1) 2.Android 输入事件一撸到底之DecorView拦路虎(2) 3.Android 输入事件一撸到底之View接盘侠(3 前 ...

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

项目背景

问题描述

解决技巧

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

最新文章

热门文章