防抖函数。

  将几次操作合并为一次操作进行。设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器。如此,只有最后一次操作能触发。代码如下:

function debounce(fn,wait){
let timer=null;
return function(){
let args=arguments,that=this;
timer&&clearTimeout(timer);
timer=setTimeout(function(){fn.apply(that,args)},wait)
}
}

节流函数。

  一定时间内只触发一次函数。并且开始触发一次,结束触发一次。代码如下:

function throttle(fun, delay){
let timer = null;
let startTime = Date.now();
return function(){
let curTime = Date.now();
let remain = delay - (curTime - startTime);
let that = this;
let args = arguments;
clearTimeout(timer);
if(remain <= 0){
fun.apply(that,args);
startTime = Date.now();
}else{
timer = setTimeout(fun, remain);
}
}
}

js实现防抖,节流的更多相关文章

  1. JS的防抖与节流

    JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...

  2. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  3. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

  4. js函数的节流和防抖

    js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...

  5. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  6. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  7. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  8. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  9. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  10. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

随机推荐

  1. Python之路,Day1 - Python基础1 --转自金角大王

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  2. TIJ——Chapter Six:Access Control

    package:the library unit The levels of access control from "most access" to "least ac ...

  3. 记一次Celery的仇

    背景:项目在公司的一台虚拟机上运行(32核+32G).其他人的项目也在这台物理机上运行..我的训练代码是单进程的,跑完一次需要大约10h(数据量大逮着一个核使劲跑..):训练是一个Celery定时任务 ...

  4. ios7.1安装提示"无法安装应用程序 由于证书无效"的解决方式二(dropbox被封项目转移到Appharbor上)

    6月18日起dropbox被天朝封了(这个真是无力吐槽),而ios7.1要求使用ssl安全连接,则须要又一次找到一个支持https的免费server. Appharbor是个不错的选择,操作简单.此外 ...

  5. MySQL按时间统计每个小时记录数

    MySQL按时间统计每个小时记录数 方案1: ? 1 2 3 4 5 6 7 SELECT  @rownum := @rownum + 1 AS ID,         CONCAT((CASE WH ...

  6. qt开发ROS遇到这个问题 find_package(catkin) failed. catkin was neither found in the workspace nor in the CMAKE_PREFIX_PATH...

    为了实现用Qt开发ROS界面开发环境,我几乎参阅了网上所有的配置教程,安装了多个版本的qt,在ubuntu14.04和ubuntu16.04上分别进行了配置,最后都成功了.不得不说的是用QTCREAT ...

  7. @hdu - 5960@ Subsequence

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定如下计算序列权值的函数: 对于一个由三元组 (cost0, ...

  8. Firefox浏览器怎么安装adobe flash player插件

    https://jingyan.baidu.com/article/0a52e3f435d171bf62ed7237.html 有些朋友在使用Firefox火狐浏览器,但是火狐浏览器安装以后是没有fl ...

  9. 1月房地产企业销售TOP100出炉 万科重回第一

    1月房地产企业销售TOP100出炉 万科重回第一 2017-02-05 07:40:32 来源:腾讯新闻 责任编辑: [摘要]TOP100房企1月的销售金额合计4311.8亿元,销售面积合计3648. ...

  10. Jmeter json处理器