Skip to content

Instantly share code, notes, and snippets.

Avatar
🖤
EqualityMatters

Chang Yan cyan33

🖤
EqualityMatters
View GitHub Profile
View debounce.js
function debounce(fn, delay = 1000) {
let timeoutId = null;
return () => {
if (timeoutId) {
timeoutId = null;
}
timeoutId = setTimeout(fn, delay);
};
@cyan33
cyan33 / debounce.js
Created Oct 28, 2018
a simple debounce implementation
View debounce.js
// I bounced into this debounce implementation today and
// think it's actually quite easy and simple
function debounce(fn, ms = 1000) {
let timeout = null;
return (...args) => {
if (timeout) {
clearTimeout(timeout);
}
@cyan33
cyan33 / observer.js
Created Oct 14, 2018
a simple observer pattern implemented in JavaScript
View observer.js
function createObserver(listeners = {}) {
function addListener(eventType, cb) {
if (listeners.hasOwnProperty(eventType)) {
listeners[eventType].push(cb);
} else {
listeners[eventType] = [cb];
}
return function removeListener() {
const index = listeners[eventType].indexOf(cb);
}
@cyan33
cyan33 / state-tracking.js
Created Jun 10, 2018
state tracking, undo, redo state changes in React
View state-tracking.js
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
pointer: -1,
stateQueue: [],
currentState: { count: 0 }
};
@cyan33
cyan33 / how-many-siblings.js
Created May 28, 2018
Usage of react render props
View how-many-siblings.js
// This is a stupid example of using render props when I was
// reading the doc of React.children
const React = require('react');
class CountSiblings extends React.Component {
render() {
const {children} = this.props;
return children(
React.Children.count(children),
);
}
@cyan33
cyan33 / rIC.js
Last active May 24, 2018
requestIdleCallback
View rIC.js
// cannot force call the callback when it times out though
var requestIdleCallback = window.requestIdleCallback || function(callback, {timeout = Infinity}) {
let startTime = Date.now();
return setTimeout(function() {
// 50 -> duration per frame
var timeRemaining = Math.max(0, 50 - (Date.now() - startTime));
callback({
didTimeout: timeRemaining === 0,
timeRemaining,
@cyan33
cyan33 / pre-pr.sh
Created May 21, 2018
One liner before you submit PR to the React repo
View pre-pr.sh
yarn prettier && yarn linc && yarn flow dom
@cyan33
cyan33 / debounce.js
Created Apr 27, 2018
A debounce that makes more sense to me (written by myself)
View debounce.js
function debouce(fn, wait = 99) {
let timeout = null;
function process(args) {
fn(args);
timeout = null;
}
return function() {
if (!timeout) {
View debounce.js
function debounce(fn){
var id, timestamp;
var wait = 99;
var check = function(){
var last = (Date.now()) - timestamp;
if (last < wait) {
id = setTimeout(check, wait - last);
} else {
id = null;
@cyan33
cyan33 / async-react-component.js
Created Apr 15, 2018
async react component for code splitting
View async-react-component.js
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};