`
mxyzdl1234
  • 浏览: 3706 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

setTimeout使用中响应方法里的this引用乱指

阅读更多
    今天修改Ext源码时,使用了setTimeout方法,setTimeout(func,ms)其中func方法中的this引用指向的居然是windows,并不是源对象的引用,而且给func方法传参数很是麻烦,经过与同事沟通,了解到Ext也有相应的延迟任务的api,其源码如下:
Ext.util.DelayedTask = function(fn, scope, args){
    var me = this,
        id,     
        call = function(){
            clearInterval(id);
            id = null;
            fn.apply(scope, args || []);
        };
 
    me.delay = function(delay, newFn, newScope, newArgs){
        me.cancel();
        fn = newFn || fn;
        scope = newScope || scope;
        args = newArgs || args;
        id = setInterval(call, delay);
    };
 
    me.cancel = function(){
        if(id){
            clearInterval(id);
            id = null;
        }
    };
}; 

其中第二个参数 scope,决定了响应方法fn中的this引用到底指向谁,而且如果想向fn中传入参数,可以使用第三个参数,以数组的形式[..]想传多少个参数就传多少个参数,很方便。
0
0
分享到:
评论

相关推荐

    Vue中使用 setTimeout() setInterval()函数的问题

    总结来说,使用`setTimeout`和`setInterval`在Vue中需要特别注意`this`的指向问题,以及确保通过Vue实例直接或间接修改数据以触发响应式更新。同时,可以考虑使用`Vue.nextTick`来确保在DOM更新后执行后续操作,这在...

    javascript setTimeout()传递函数参数(包括传递对象参数)

    在JavaScript中,定时器函数的字符串形式已经被废弃,因为它们容易引发错误和安全漏洞,现在推荐使用函数引用和apply方法来传递参数。 正确的做法是直接传递一个函数引用,然后在那个函数内部使用apply()或call()...

    vue 需求 data中的数据之间的调用操作

    为了避免在回调函数或其他异步操作中丢失`this`,可以使用箭头函数或者在方法内部保存`this`的引用: ```javascript methods: { methodA() { const self = this; setTimeout(() => { self.methodB(); // 使用...

    【JavaScript源代码】vue2实现provide inject传递响应式.docx

    Vue.js 是一款流行的前端框架,它的核心特性之一是数据绑定和响应式系统。在 Vue 2 中,为了在组件间实现非父子组件的数据传递,官方提供了 `provide` 和 `inject` API。这两个选项允许我们创建一种跨级依赖注入,...

    【JavaScript源代码】Vue3中的Refs和Ref详情.docx

    `Refs` 通常用于创建对复杂对象的响应式引用,而 `toRefs` 和 `toRef` 则用于将一个响应式对象拆分成多个独立的响应式引用,以便于在模板中分别处理每个属性。在进行数据绑定和操作时,正确使用这些工具可以确保数据...

    Vue 解决通过this.$refs来获取DOM或者组件报错问题

    - **使用`this.$nextTick()`**:这是最常用的方法,将需要访问`this.$refs`的代码包裹在`this.$nextTick()`回调函数中,确保在DOM更新后执行。 ```javascript this.$nextTick(() => { this.$refs.name... // DOM...

    前端大厂最新面试题-2020跟谁学前端社招面经.docx

    3. this 关键字的使用:this 关键字在 JavaScript 中是一个复杂的概念,指向当前对象的引用。在函数内部,this 指向函数的调用者,而在全局作用域中,this 指向 window 对象。例如,在问题 8 中,get 函数的 this ...

    vue实现简易计时器组件.docx

    由于 Vue 的响应式系统,组件中的数据变化会自动触发视图的更新,使得计时器的显示始终保持最新。 总的来说,Vue 实现计时器组件的关键在于理解 JavaScript 的定时器机制,并结合 Vue 的生命周期和数据绑定特性。...

    酷家乐(21问).pdf

    5. **setInterval注意事项**:使用`setInterval`时要注意其回调函数中不应该使用`this`关键字,因为`setInterval`并不会在运行时绑定到组件的上下文中,而且定期检查和清除不需要的定时器是防止内存泄露的一个好习惯...

    避免一个方法在一定时间内被调用多次

    在你提供的场景中,描述提到的方法希望在1秒内,无论被调用多少次(比如100次),都只使用最后一次调用的参数执行一次。这正是防抖动的典型应用场景。 实现防抖动通常有两种方式:即时防抖(Immediate Debounce)和...

    vue和js面试题整理

    - Vue实例化时,data作为配置项传入,如果是函数则返回其值,对象则直接使用,并且创建data的响应式引用,使vm.$options.data和vm._data保持一致。 以上就是关于Vue和JavaScript面试题的一些关键知识点,涵盖了Vue...

    面向对象的 JavaScript 编程及其 Scope 处理

    封装是指将数据(属性)和行为(方法)绑定在一起,隐藏内部实现细节,只暴露必要的接口给外部使用。在 JavaScript 中,通过构造函数和类可以实现封装。 **示例:** ```javascript function Rectangle(width, ...

    JavaScript树状结构和时间操作

    在JavaScript中,你可以使用对象来表示树的节点,并通过属性保存子节点的引用。例如: ```javascript function TreeNode(value) { this.value = value; this.children = []; } // 添加子节点 TreeNode.prototype...

    字节最新前端面试题.pdf

    - 可以使用filter方法遍历一个数组,并检查元素是否存在于另一个数组中。 35. 图片宽度修改: - 虽然代码不可修改,但可以使用CSS来强制改变图片的宽度。 以上是根据文件提供的部分内容提炼出的关键知识点,涵盖...

    jquery模拟ajax关闭div窗口效果

    `setTimeout`模拟了服务器响应时间,然后使用`fadeOut`方法平滑地淡出div窗口。当动画完成后,`remove`方法将div元素从DOM中移除。 为了实现更真实的效果,我们可以添加一个自定义的CSS样式来显示加载动画: ```...

    js 访问dotnet control

    在JavaScript中,可以使用`setTimeout`或`setInterval`来模拟异步回调,但这种方式并不理想,因为它们可能会导致性能问题。更好的做法是使用.NET控件提供事件支持,当.NET执行完某个操作后触发事件,JavaScript端...

    基于jquery实现仿时光网首页宽屏焦点图切换效果代码.zip

    1. **jQuery选择器**:jQuery提供了丰富的选择器,可以方便地定位到页面上的DOM元素,如`.eq()`选择指定索引的元素,`$(this)`引用当前上下文的元素等。 2. **DOM操作**:使用`append()`、`prepend()`、`before()`...

    js高级面试题

    例如,在 Cordova 或 React Native 中,可以使用特定的 API 来触发原生方法或接收来自原生层的数据。 综上所述,JavaScript 的高级知识点涵盖了从语言特性、框架使用到开发模式等多个方面。掌握这些知识不仅有助于...

    【JavaScript源代码】vue实现广告栏上下滚动效果.docx

    在本文中,我们将探讨如何使用 Vue 来实现一个广告栏的上下滚动效果。这个效果通常应用于显示滚动消息或广告,以吸引用户的注意力。 首先,HTML 结构是这样的: ```html (item, index) in msg" :key="index...

    2019Node.js API 中文版

    这有助于开发者了解API的成熟程度以及何时可以安全地在生产环境中使用它们。 **JSON格式输出** Node.js支持原生的JSON格式处理,包括解析和序列化JSON数据。这对于与Web服务进行交互非常有用。 **系统调用和手册页...

Global site tag (gtag.js) - Google Analytics