函数的防抖---js
执行规定一段时间后执行
<input type="text" id="inp" />
<script>
var oInp = document.getElementById("inp")
var timer = null; function ajax(e) { // 需要执行的函数
console.log(this.value);
}
oInp.oninput = function(e) {
clearTimeout(timer); // 结束上一次的定时器
var _this = this, _argm = arguments
timer = setTimeout(function() { // 1000ms后执行定时器内的事件
ajax.apply(_this, _argm) // 使用apply将this指向到该函数内
}, 1000)
}
</script>
将该功能封装成一个还是
<input type="text" id="inp" />
<script>
var oInp = document.getElementById("inp")
var timer = null; function ajax(e) { // 需要执行的函数
console.log(this.value, e);
} function debounce(handler, delay) { //封装防抖
var timer = null;
return function() {
var _this = this,
_argm = arguments;
clearTimeout(timer)
timer = setTimeout(function() {
handler.apply(_this, _argm)
}, delay)
}
} oInp.oninput = debounce(ajax, 1000)
</script>
函数的防抖---js的更多相关文章
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- 原生JavaScript实现函数的防抖和节流
原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...
- JS高级---案例贪吃蛇,把封装的函数移动到js文件中
案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
- js面试题之手写节流函数和防抖函数
函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...
- js 函数的防抖(debounce)与节流(throttle)
原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...
- form.submit(回调函数)——引用jq-form.js
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- javascript console 函数详解 js开发调试的利器
Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 使用 alert 不是一样可以显示 ...
- JavaScript函数认识,Js中的常见函数
JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...
随机推荐
- C# 请求在线接口数据
请求后台,有很多方式,常见的有WebRequest.HttpClient.以下mark一上~ WebRequest方式 1. Get public static async Task<strin ...
- (转)GitHub Desktop 拉取 GitHub上 Tag 版本代码
转自:GitHub Desktop 拉取 GitHub上 Tag 版本代码 一直在使用 GitHub Desktop 图形化 git 管理工具,统一项目框架版本时需要切换到ThinkPHP Tag 分 ...
- Flask 教程 第五章:用户登录
本文翻译自The Flask Mega-Tutorial Part V: User Logins 这是Flask Mega-Tutorial系列的第五部分,我将告诉你如何创建一个用户登录子系统. 你在 ...
- 应用Tomcat进行多端口域名访问,并配置开启gzip压缩方法
1.除了默认的8080端口以外,我们尝试应用9090端口进行域名访问,打开server.xml 如图: 2.在代码里面进行添加如下9090下面的代码: 如图: 3.用9090端口进行访问 如图: 4. ...
- 转战物联网·基础篇09-选择MQTT协议还是CoAP协议
前面章节介绍过,MQTT协议和CoAP协议都是物联网中比较流行的协议,都对传输量做了很大的精简,传输开销小,以适应物理网的网络环境. XMPP协议也有人说是适合物联网通信的,但它是基于XML, ...
- 详解 DNS 与 CoreDNS 的实现原理
域名系统(Domain Name System)是整个互联网的电话簿,它能够将可被人理解的域名翻译成可被机器理解 IP 地址,使得互联网的使用者不再需要直接接触很难阅读和理解的 IP 地址. http ...
- nginx——keepalived
nginx--keepalived 1.keepalived高可用基本概述 什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...
- Linux:DNS服务器搭建
DNS简介 DNS(Domain Name System)域名系统: 是一种采用客户端/服务器机制,负责实现计算机名称与IP地址转换的系统.DNS作为一种重要的网络服务,既是国际互联网工作的基础,同时 ...
- elasticsearch安装与使用
一.windows10上安装elasticsearch Elasticsearch 需要 Java环境,在安装Elasticsearch之前先安装好JDK. 本文安装jdk1.8,es6.3.2为例. ...
- ACM 基本输入
单次输入 C语言 int a,b; scanf("%d %d",&a,&b); C++语言 int a,b; cin >> a >> b; ...