函数的防抖---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函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...
随机推荐
- 基于STM32F429的内存管理
1.内存管理介绍 内存管理,是指软件运行时对计算机内存资源的分配和使用的技术.其最主要的目的是如何高效,快速的分配,并且在适当的时候释放和回收内存资源. 内存管理的实现方法有很多种,他们其实最终都是要 ...
- Linux gzip: stdin: not in gzip format
在解压tar.gz文件的时候报错 tar -zxvf otp_src_18.3.tar.gz gzip: stdin: not in gzip format tar: Child returned s ...
- jvm虚拟机笔记<五> 编译期优化
JVM的编译器可以分为三个编译器: 1.前端编译器:把.java转变为.class的过程.如Sun的Javac.Eclipse JDT中的增量式编译器(ECJ). 2.JIT编译器:把字节码转变为机器 ...
- BeautifulSoup的重要操作
BeautifulSoup相关概念总结:https://www.cnblogs.com/pythonywy/p/11134481.html css基础以及选择器基础:https://www.cnblo ...
- Java基础专题
Java后端知识点汇总——Java基础专题 全套Java知识点汇总目录,见https://www.cnblogs.com/autism-dong/p/11831922.html 1.解释下什么是面向对 ...
- 升鲜宝V2.0_杭州生鲜配送行业,再论B端生鲜配送企业管理软件的开发与实施的难点与行业痛点_15382353715_余东升
升鲜宝V2.0_杭州生鲜配送行业,再论B端生鲜配送企业管理软件的开发与实施的难点与行业痛点_15382353715_余东升 笔者简介:升鲜宝供应链管理软件平台创始人,14年软件从业经历,10多年深究生 ...
- [转]UIPATH机器人指南
本文转自:https://blog.csdn.net/weixin_33957036/article/details/80907372 介绍 机器人是UiPath的执行代理,可运行Studio中内置的 ...
- WebGL-3D地图大俯仰角的雾化处理
腾讯位置服务Javascript API GL版,是基于WebGL技术打造的地图API库,使得浏览器环境下也可实现APP端的应用体验,提供2D/3D模式,运行流畅.当前版本提供地图展示.标记.信息窗口 ...
- How to restore and recover a database from an RMAN backup. (Doc ID 881395.1)
APPLIES TO: Oracle Database - Enterprise Edition - Version 10.1.0.2 to 11.2.0.2 [Release 10.1 to 11. ...
- [Linux] shell中for循环grep正则统计指定关键字
需求是统计某个业务的访问个数日志服务器上的目录结构是如下,搜索最近7天的指定关键字数据,并排重统计个数: drwxr-xr-x root root Nov : -- drwxr-xr-x root r ...