js防抖节流

news/2024/7/9 23:39:50 标签: javascript, vue
// 使用场景:防止狂点
function debounce(fn,delay=500){
	// 使用vue的话, debounce.timer 换成 this.timer 
	debounce.timer && clearTimeout(debounce.timer) ;
	debounce.timer = setTimeout(()=>{
	// fn....
		debounce.timer = null
	},delay)
}

throttle (func, delay) {     
    let timer = null;     
    let startTime = Date.now();     
    return function() {             
        const curTime = Date.now();             
        const remaining = delay - (curTime - startTime); 
        timer && clearTimeout(timer);  
  //使用场景 window.addEventListener('scroll', throttle(fn, 1000));
  
  //添加事件一段时间不滚动,remaining < 0保证了第一次触发事件就能立即执行事件处理函数
        if (remaining <= 0) {                 
            func.apply(this, arguments);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}

http://www.niftyadmin.cn/n/1367773.html

相关文章

js的this理解

function log () {console.log(this) } let obj {} obj.sonobj {son: } obj.log log obj.sonobj .log log obj.log() // {sonobj: {…}, log: ƒ} obj.sonobj .log() // {son: " ", log: ƒ}总结&#xff1a;谁直接调用this就是谁&#xff0c;不管它是不是在调用…

vue接入点聚weboffice打开在线文档报系统错误

运行官方的demo能正常打开线上文档放到vue打开就报错打开demo一行一行的排查解决bug:组件初始化需要调用一下weboffice.OptionFlag | 128; 相关代码&#xff1a; // weboffice 组件 <object ref"weboffice" :heightheight :widthwidth stylelet: 0px; top: 0px …

读书笔记:js中的null 和 undefined 的区别

1.在JS中 null和 undefined 都表示空&#xff0c;但它们还是存在一定区别的&#xff0c; null 表示不存在、没有&#xff0c;而 undefined 表示未定义。 2.底层实现时&#xff0c; null 一般会指向一个全 0 的地址&#xff0c;当 然&#xff0c;这个地址是无法访问的&#xff…

document的只读属性

1. domain&#xff1a; 当前文档的域名2. URL &#xff1a;当前文档 url3. referrer&#xff1a; 当前文档的前一个页面的url4. anchors&#xff1a; 当前文档的所有锚点&#xff08;a 标签&#xff09;5. forms &#xff1a;当前文档中的所有表单6. images &#xff1a;当前文…

不想用原生滚动条,用Element-ui隐藏组件el-scrollbar

查看源码接受的props props: {native: Boolean, // 是否启用原生样式&#xff1b;默认falsewrapStyle: {}, wrapClass: {}, // 标签样式 F12 查看viewClass: {}, viewStyle: {},noresize: Boolean, // 如果 container 尺寸不会发生变化&#xff0c;最好设置它可以优化性…

vue 使用 this.$forceUpdate()页面没有刷新

所遇问题&#xff1a; 使用了select、input组件,v-model后值更新了&#xff0c;页面数据未同步change事件调用this.$forceUpdate()&#xff0c;没有效果 解决办法&#xff1a;强制组件重新渲染 // 封装个forceUpdate方法 // 子组件在change调用 this.$emit(forceUpdate) // …

vue 、 在element-ui的el-table组件中 使用 el-select绑定对象时value-key的注意事项

// 绑定对象时设置了value-key&#xff0c;再次点击时不会高亮,找了源码发现key需要一致&#xff1b; // 相关源码 isEqual(a, b) {if (!this.isObject) {return a b;} else {const valueKey this.select.valueKey;return getValueByPath(a, valueKey) getValueByPath(b, va…

如何将浏览器中的坐标转换为 canvas 中的坐标

function convertToCanvas(canvas, x, y} {const canvasElement canvas.getBoundingClientRect() ;return { x: (x- canvasElement.left)*(canvas.width / canvasElement.width),y: (y - canvasElement.top)*(canvas.height / canvasElement.height)} }转换的逻辑是先使用鼠…