简单实现防抖和节流

最新推荐文章于 2023-08-28 09:58:19 发布

白小白灬

最新推荐文章于 2023-08-28 09:58:19 发布

阅读量484

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/l2345432l/article/details/118151943

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简易版防抖

存入utils里，使用时引入即可

export function debounceSimple(func, wait, immediate) {
  let timeout

  return function(...args) {
    const context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

页面使用时：

import { debounceSimple } from '@/utils'
// 在data里赋值变量 vm=this
// @click="toSearchName(vm)" 传入参数vm
toSearchName: debounceSimple((vm) => {
// 逻辑代码
}, 200, false)
// 传入true，首次点击立即执行，相当于防抖。传入false，最后一次点击执行，相当于节流。