React中的setTimeout、setInterval的注意事項

wenshi11019 發(fā)布于2019-08-20 17:00 / 1618人閱讀

摘要：最近功能需求，在用戶輸入的一個輸入框后，毫秒觸發(fā)事件，解決方案很簡單，嘛代碼如下看似合情合理，但是呢，完全不好用，不是別的不好用，而且完全不會，而且每個都執(zhí)行了，這是啥原因呢想了一想，于是又改了一個寫法好用了，也是同樣的道理，別忘記就好。

最近功能需求，在用戶輸入的一個輸入框后，500毫秒觸發(fā)事件，解決方案很簡單，setTimeout嘛......

代碼如下：

class A extends React.Component{
    handleChange(target){
        var that = this;
        if(this.timer){
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(setTimeoutFun(that,target),500);
        
    }
    setTimeoutFun(_self,_target){
        _self.setState({
            xxx:_target.value
        });
        _self.timer = null;
    }
    render(){
        return(
            
        )
    }
    
}

看似合情合理，但是呢，完全不好用，不是別的不好用，而且完全不會clear，而且每個setTimeout都執(zhí)行了，這是啥原因呢？想了一想，于是又改了一個寫法：

class A extends React.Component{
    handleChange(target){
        var that = this;
        if(this.timer){
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(()=>{
            that.setState({
                xxx:target.value
            });
        },500); 
    }
    render(){
        return(
            
        )
    }
    
}

Bingo!!好用了，setInterval也是同樣的道理，別忘記clear就好。

解決方法就是不要調(diào)用再模塊中定義的方法，用匿名函數(shù)！！

但是為什么匿名函數(shù)就可以，但是在創(chuàng)建的模塊中定義的方法就不好用呢？這個原因還在研究，等研究明白了再更新，希望能對大家有幫助！！

GPU云服務器云服務器 setInterval setTimeout javascript settimeout 的注意事項

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83314.html

精讀《Function Component 入門》

摘要：比如就是一種，它可以用來管理狀態(tài)返回的結果是數(shù)組，數(shù)組的第一項是值，第二項是賦值函數(shù)，函數(shù)的第一個參數(shù)就是默認值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠指向最新的值，因此沒有邏輯漏洞。 1. 引言如果你在使用 React 16，可以嘗試 Function Component 風格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對 Function Com...

Scholer 2019-08-26 13:56 評論0 收藏0
React16性能改善的原理一

摘要：接下來看下偽代碼調(diào)度算法偽代碼原來這段寫的匆忙且不好，重新更新了一篇講調(diào)度算法的大概實現(xiàn)性能改善的原理二。問題背景 React16 更新了底層架構，新架構主要解決更新節(jié)點過多時，頁碼卡頓的問題。譬如如下代碼，根據(jù)用戶輸入的文字生成10000行數(shù)據(jù)，用戶輸入框會出現(xiàn)卡頓現(xiàn)象。 class App extends React.Component { constructor( prop...

zhangqh 2019-08-23 15:21 評論0 收藏0
個人常用JavaScript及React常用優(yōu)化總結

摘要：插件性能優(yōu)化及個人常用優(yōu)化方法經(jīng)常會觸發(fā)視覺變化。作用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優(yōu)化時，數(shù)值和變量的性能差不多，并且速度顯著優(yōu)于對象屬性和數(shù)組元素。 JavaScript 插件性能優(yōu)化及個人react常用優(yōu)化方法 JavaScript 經(jīng)常會觸發(fā)視覺變化。有時是直接通過樣式操作，有時是會產(chǎn)生視覺變化...

yuanxin 2019-08-20 15:07 評論0 收藏0
理解 React Hooks 的 Capture Value 特性

摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個示例，相信會比較容易地理解特性，并如何使用來暫時繞過它。在知道并理解這個特性后，有助于進一步熟悉了的運行機制，減少掉坑的次數(shù)。由于剛使用 React hooks 不久，對它的脾氣還拿捏不準，掉了很多次坑；這里的坑的意思并不是說 React hooks 的設計有問題，而是我在使用的時候，因為還沒有跟上它的理念導...

curlyCheng 2019-08-26 13:38 評論0 收藏0
VUE使用中踩過的坑

摘要：前言如今可謂是一匹黑馬數(shù)已居第一位前端開發(fā)對于的使用已經(jīng)越來越多，它的優(yōu)點就不做介紹了本篇是我對使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位！前端開發(fā)對于vue的使用已經(jīng)越來越多，它的優(yōu)點就不做介紹了,本篇是我對vue使用過程中以及...

big_cat 2019-08-22 14:04 評論0 收藏0