函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

js代码

/**
* @desc 函数防抖
* @param fn 函数
* @param delay 延迟执行毫秒数 默认0.5s
*/
export function debounce(fn, delay) {
var delay = delay || ;
var timer;
return function () {
console.log('调用了debounce方法')
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
} /**
* @desc 函数节流
* @param fn 函数
* @param interval 函数执行间隔时间毫秒数 默认1s
*/
export function throttle(fn, interval) {
var last;
var timer;
var interval = interval || ;
return function () {
console.log('调用了throttle方法')
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}

在vue中使用

<template>
<view>
<text @tap="clickDebounce()">防抖</text>
<text @tap="clickThrottle()">节流</text>
</view>
</template> <script>
import { debounce, throttle } from '@/utils/index.js'
export default {
data() {
return {
num: 0
}
},
methods: {
// 防抖
clickDebounce: debounce(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 600),
// 节流
clickThrottle: throttle(function() {
this.num += 1
console.log('第' + this.num +'次点击' )
}, 800)
}
}
</script>

运行结果

vue 防抖和节流的更多相关文章

  1. Javascript的防抖和节流、VUE的防抖和节流

    js原生 函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能 ...

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

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

  3. vue函数防抖和节流

    Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v ...

  4. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  5. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  6. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  7. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  8. 详谈js防抖和节流

    本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html ...

  9. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

随机推荐

  1. FJWC2017&FJOI2017一试 游记

    day1 ​ 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. ​ 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...

  2. Spring Boot教程(三)消费Restful的web服务

    构架工程 创建一个springboot工程,去消费RESTFUL的服务.这个服务是 http:///gturnquist-quoters.cfapps.io/api/random ,它会随机返回Jso ...

  3. HDU1575--Tr A(矩阵快速幂)

    Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  4. 《Effective Java》读书笔记 - 8.通用编程

    Chapter 8 General Programming Item 45: Minimize the scope of local variables local variables应该在他们要被用 ...

  5. List of Mozilla-Based Applications

    List of Mozilla-Based Applications The following is a list of all known active applications that are ...

  6. Linux驱动开发8——中断处理

    中断包括软中断和硬中断两种,中断是一种异步I/O机制,即中断可以发生在任意时间点. 1.硬中断 硬件中断包括触发中断和处理中断两部分,而维系两者的是中断号,中断号是一种硬件资源. 1.1.注册和释放中 ...

  7. nginx请求转发配置

    以下为无ssl证书配置的请求转发 server { listen ; server_name api.****.com; #以下为指定请求域名匹配到某一个端口 #location ~* /union ...

  8. 在windows下使用Mingw搭建模拟Linux

    1.到官网下载最新版Mingw 2.点击安装,最好选择默认路径,如果不是的话,路径中一定不能有空格. 3.选择安装,mingw-developer-toolkit.mingw32-base.mingw ...

  9. JS遍历二维数组

    //求平均数 var pjs=[ ['小明',87], ['小红',81], ['小花',97], ['小天',76], ['小张',74], ['小小',94], ['小西',90], ['小武', ...

  10. autoprefixer不起作用的坑

    概述 今天同事说,nuxt.js的项目好像没有自动加前缀,我花了很长时间查找原因,最后终于发现,原来是没有加.browserslistrc文件...记录下来,供以后开发时参考,相信对其他人也有用. b ...