节流,防抖

最新推荐文章于 2022-08-01 17:27:17 发布

小四是个处女座

最新推荐文章于 2022-08-01 17:27:17 发布

阅读量105

点赞数 1

分类专栏：前端 vue js 文章标签： vue.js jquery 前端 javascript

本文链接：https://blog.csdn.net/xiaosi1413/article/details/116904463

版权

前端同时被 3 个专栏收录

72 篇文章 6 订阅

订阅专栏

vue

64 篇文章 1 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的节流和防抖技术，通过示例代码展示了如何使用throttle.js和debounce.js实现这两个功能。在Vue组件中，以搜索输入框为例，应用了节流技术优化频繁触发的doctorSearch方法，避免过度请求。同时，文章还给出了防抖函数的实现，用于确保在特定时间间隔内只执行最后一次操作。

摘要由CSDN通过智能技术生成

基于wue使用

throttle.js文件

节流

/**
 * 节流
 * @param {function} fn         触发的函数
 * @param {number} interval     间隔时间
 */
export function throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        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>
  <input type="text" placeholder="搜索医生" class="search-input" 
     @input="doctorSearch($event)"  @keyup.enter="doctorSearch($event)"
 />
</template>
<script>
import { throttle } from "@/utils/throttle";
methods: {
    doctorSearch: throttle(e => {
      let searchVal = e.target.value;
      self.searchVal = searchVal;
      // 全部都重置到第一页
      self.departmentData.map(item => {
        item.page = 1;
      });
      self.onLoad('reload', self.labelActive);
    }, 800),
 }
 </script>

使用方法同上

防抖

/**
 * 防抖
 * @param {function} func       触发的函数
 * @param {number} wait         间隔时间
 * @param {boolean} immediate   是否立即执行
 */
export function debounce(func, wait = 500, immediate = true) {
    let timeout, args, context, timestamp, result

    const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last)
        } else {
            timeout = null
            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
            if (!immediate) {
                result = func.apply(context, args)
                if (!timeout) context = args = null
            }
        }
    }

    return function (...args) {
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
            result = func.apply(context, args)
            context = args = null
        }

        return result
    } 
}