同样是面试遇到的问题,input输入框,怎么减少发送请求次数。

键盘抬起触发事件,首先清除定时器,再开启定时器。只要小于1s的连续输入,都会先把上一次定时器清除。停顿一秒后,开始执行请求事件(此处为console.log)。

    	var timeout;  
document.querySelector(".btn").onkeyup = function(event) {
clearTimeout(timeout);  
timeout = setTimeout(function() {  
console.log(document.querySelector(".btn").value) 
}, 1000);  
};

input输入框延时发送请求问题的更多相关文章

  1. 移动端 input 输入框实现自带键盘“搜索“功能并修改X

    主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...

  2. js实现连续输入之后发送请求

    输入框是我们经常会用到的功能,想要实现输入就请求的功能 但是在实际开发中,为了减少服务器压力,会在输入之后停留1s没有输入之后再进行搜索 研究之后用原生js及表单写了一个简单的demo,如果有好的de ...

  3. Android HTTP实例 使用GET方法和POST方法发送请求

    Android HTTP实例 使用GET方法和POST方法发送请求 Web程序:使用GET和POST方法发送请求 首先利用MyEclispe+Tomcat写好一个Web程序,实现的功能就是提交用户信息 ...

  4. ajax发送请求

    首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...

  5. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...

  6. 移动端,input输入框被手机输入法解决方案

    当界面元素靠下时候的时候,input输入框会被系统的键盘遮挡. 我们可以让界面向上移动一定距离去避免遮挡. $('#money').click(function(){ setTimeout(funct ...

  7. ajax的get 和post方式发送请求

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  9. 移动端input“输入框”常见问题及解决方法

    转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

随机推荐

  1. 多进程使用matplotlib.pyplot绘heatmap(多线程不可以)

    数据格式如下: 8_15/l_eye/2732.png -20.5773 -5.17769 -3.34583 21.5859 9_13_1/l_eye/1211.png -10.1145 34.992 ...

  2. django URL的补充 默认值 传多个参数

    url 后面还可以加上默认值 默认值 url(r'^index/', views.index, {'name': 'root'}), urls.py url对应关系 from django.conf. ...

  3. air游戏接入小米支付sdk

    小米支付sdk要求在Application.onCreate中进行初始化 为了这个初始化搞了半天,最终搞定了.今天将更改的步骤记录下了. 1. 创建ANE.ANE的创建就不罗嗦了,这里须要注意一点,这 ...

  4. python学习笔记(二)文件操作和集合

    集合: 集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据 集合的作用: 1.它可以把一个列表中重复的数据去掉,而不需要你再写判断 2.可以做关系测试, ...

  5. lnmp1.4环境下thinkphp3.2配置pathinfo模式

    1.打开php.ini 通常该文件在 /usr/local/php/etc/php.ini vi /usr/local/php/etc/php.ini 找到 cgi.fix_pathinfo,默认为0 ...

  6. Linux系统——shell脚本

    shell脚本编程 作用:通过命令行解析的方式,自动执行设定好的程序或命令代码.(若将脚本挂到定时任务中,就会自动在非工作时间里自动触发执行程序) Shell脚本文件以“.sh”结尾 规范的Shell ...

  7. centos运行asp.netcore的正确姿势

    centos安装.netcore2.0 一切都很顺利,console app运行 dotnet run也ok 但是asp.net core app运行 dotnet run 会抛出Warn:“Unab ...

  8. exec-maven-plugin配置及使用

    背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们所指的预执行,初始化某些值,生成某些不能预先生成的文件.那么这样我们就可以使用exec-maven-plu ...

  9. 145. Binary Tree Postorder Traversal(二叉树后序遍历)

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  10. iClap:产品经理再忙也要看《琅琊榜》

    最先知道<琅琊榜>,是半年前偶然看了整整21分钟的<琅琊榜>片花,对麒麟才子梅长苏这一角色甚是期待,开播后每集必看,重复看,此剧果真不负众望,口碑爆棚,收视爆红,确是一部久违的 ...