防抖函数。

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

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. 散列表(Hash Table)

    散列表(hash table): 也称为哈希表. 根据wikipedia的定义:是根据关键字(Key value)而直接访问在内存存储位置的数据结构.也就是说,它通过把键值通过一个函数的计算,映射到表 ...

  2. AtCoder Beginner Contest 064 D - Insertion

    AtCoder Beginner Contest 064 D - Insertion Problem Statement You are given a string S of length N co ...

  3. 洛谷 P4114 Qtree1 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例: 输出样例: 说明 说明 思路 Change Query AC代码 总结 题面 题目链接 P4114 Qt ...

  4. 【NS2】cygwin+NS2.29安装之道 (转载)

    最近接了一个需要进行网络模拟的项目.对与网络模拟一窍不通的本人算是一个挑战.于是乎开始整日上网搜索相关的资料,没想到这个世界的资源真是丰富多彩.最后发现了一个网络模拟的流行软件NS2,在经过多次尝试后 ...

  5. 不撞南墙不回头———深度优先搜索(DFS)Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. 逆序对(POJ2299 Ultra-QuickSort)

    #include<bits/stdc++.h> using namespace std; int n; ],b[],ans;//a为待排序数组,b为临时数组,ans为逆序对数 void m ...

  7. Python深入:Distutils安装包

    一:简介 尽管Python标准库已经支持很多的功能,但是有时还是会需要以第三方模块的形式添加新的功能到Python中. 在最简单的场景中,是你要安装的模块,已经有了针对你的平台的安装版本,因此只需要像 ...

  8. 修改UISearchBar背景

    转载:http://blog.csdn.net/favormm/archive/2010/11/30/6045463.aspx UISearchBar是由两个subView组成的,一个是UISearc ...

  9. H3C RARP

  10. 队列&优先队列

    1.队列 普通的队列都是先进先出,元素从队尾添加,从队头删除. function queue(){ var arr=[]; this.enqueue=function(item){ arr.push( ...