函数的防抖---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函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...
随机推荐
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- DOM CSS
DOM CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElemen ...
- OC代码规范小记
代码规范 一:基本代码命名 1.通用原则 尽量清晰又简洁,无法两全时清晰更重要,可读性优先级更高. insertObject:atIndex: 好的 insert:at 坏的 removeObject ...
- jmeter控制器(三)
While Controllert当控制器: 当满足条件的情况下,就会执行控制器里面的脚本,首先我们设置线程组循环次数为10,如下图: 其次在配置元件中添加一个计数器,并设置从0到最大的10,每次递增 ...
- Hive静态分区和动态分区,对应Mysql中的元数据信息
静态分区: 手动指定分区加载数据,就是常说的静态分区的使用.但是在日常工作中用的比较多的是动态分区. 创建: hive> create table order_mulit_partition( ...
- git 现在本地创建仓库 再 推送到 远程 github 仓库中
今天,需要再本地使用git管理代码,但是当代码创建好的时候,想发布到github上面的私有仓库中,但是没有提前创建远端仓库,所以需要把本地git仓库推送到远端另外一个仓库了,下面进行简要记录,刚刚经过 ...
- docker 存储卷 Volumes
一,docker容器面临的困境: 容器运行中产生的数据,是放到容器栈的最顶层,当容器停止并被删除后,这些数据就被删除了. docker采用COW(写时复制)策略,导致性能低下.比如有个mysql容器, ...
- 面向对象程序设计(JAVA) 第14周学习指导及要求
2019面向对象程序设计(Java)第14周学习指导及要求 (2019.11.29-2019.12.2) 学习目标 (1)掌握GUI布局管理器用法: (2)掌握Java Swing文本输入组件用途 ...
- cf之 前缀和差分
给定一个n×n的WB矩阵,给定一个k∗k的能把B变成W的橡皮擦,求橡皮擦作用一次后,全为W的行.列总数最大值 连接:http://codeforces.com/contest/1200/problem ...
- python爬虫之csv文件
一.二维数据写入csv文件 题目要求: 读入price2016.csv文件,将其中的数据读出,将数字部分计算百分比后输出到price2016out.csv文件中 知识点: 对于列表中存储的二维数据, ...