diff --git a/examples/follow.js b/examples/follow.tsx
similarity index 94%
rename from examples/follow.js
rename to examples/follow.tsx
index 6668ddd..d20358b 100644
--- a/examples/follow.js
+++ b/examples/follow.tsx
@@ -4,8 +4,8 @@ import Align from '../src';
 const Demo = () => {
   const [width, setWidth] = React.useState(100);
   const [height, setHeight] = React.useState(100);
-  const [left, setLeft] = React.useState(100);
-  const [top, setTop] = React.useState(100);
+  const [left, setLeft] = React.useState<string | number>(100);
+  const [top, setTop] = React.useState<string | number>(100);
   const [visible, setVisible] = React.useState(true);
   const [svg, setSvg] = React.useState(false);
 
diff --git a/src/hooks/useBuffer.tsx b/src/hooks/useBuffer.tsx
index 26c89bc..e024e03 100644
--- a/src/hooks/useBuffer.tsx
+++ b/src/hooks/useBuffer.tsx
@@ -9,6 +9,8 @@ export default (callback: () => boolean, buffer: number) => {
   }
 
   function trigger(force?: boolean) {
+    cancelTrigger();
+
     if (!calledRef.current || force === true) {
       if (callback() === false) {
         // Not delay since callback cancelled self
@@ -16,12 +18,10 @@ export default (callback: () => boolean, buffer: number) => {
       }
 
       calledRef.current = true;
-      cancelTrigger();
       timeoutRef.current = window.setTimeout(() => {
         calledRef.current = false;
       }, buffer);
     } else {
-      cancelTrigger();
       timeoutRef.current = window.setTimeout(() => {
         calledRef.current = false;
         trigger();