执行规定一段时间后执行
    <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的更多相关文章

  1. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  2. 原生JavaScript实现函数的防抖和节流

    原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...

  3. JS高级---案例贪吃蛇,把封装的函数移动到js文件中

    案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  5. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

  6. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  7. form.submit(回调函数)——引用jq-form.js

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. javascript console 函数详解 js开发调试的利器

    Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 使用 alert 不是一样可以显示 ...

  9. JavaScript函数认识,Js中的常见函数

    JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...

随机推荐

  1. springaop\ cglib\ AspectJ

    元编程 vs 动态代理 vs isa代理 springaop的底层实现有两种,一种是jdk的动态代理,另一种是cglib,springaop没有用到aspectj,只是借鉴了它并添加了aspectj风 ...

  2. Jmeter元件——JSON Extractor后置处理器介绍2

    在前段时间将JSON Extractor元件做了个简单的介绍:Jmeter元件——JSON Extractor后置处理器介绍1,今天以一个具体的json,以不同的方式提取数据做个详细的介绍. 一.模拟 ...

  3. java基础(2):注释、关键字、标识符、数据

    1. 注释.关键字与标识符 大家可以安装一个文本编辑软件notepad++,有利于java代码的查看与编写. 1.1 程序注释 通常我们需要在源代码中添加文字用来对进行代码解释说明,但这些文字并不是J ...

  4. PostgreSQL 常用函数

    类似Oracle ,PostgreSQL也有强大的类型转换函数, 下面仅举两个类型转换例子. --1 例子 postgres; ?column? ---------- ( row) 在PG里如果想做除 ...

  5. Zimbra

    第一步:利用XXE读取配置文件 这里利用了CVE-2019-9670漏洞来读取配置文件,你需要在自己的VPS服务器上放置一个dtd文件,并使该文件能够通过HTTP访问.为了演示,我在GitHub上创建 ...

  6. 2018最新cocoapods详细安装和使用

    1查看当前终端里存在的源 终端输入:$ gem sources -l2移除淘宝镜像 $ gem sources --remove https://rubygems.org/ 3装上目前能用的源 终端输 ...

  7. 别不信!servlet获取到的参数值,也许完全出乎你的意料!

    先贴出来简单得不能再简单的demo页面效果: 如下是spring mvc的Controller: @RequestMapping("mytest") @Controller pub ...

  8. EM13C添加agent记录两个报错

    错误一:ADF_FACES-60097:For more information, please see the server's error log for an entry beginning w ...

  9. Python—创建进程池的方式

    创建进程池 from multiprocessing import Pool import time,os result = [] # 存放所有worker函数的返回值 def worker(msg) ...

  10. idea安装以及使用

    1. 简介1.1 IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构. J2EE ...