zoukankan      html  css  js  c++  java
  • [Functional Programming] Building a Timer UI by Composing Callbacks

    Controlling when a broadcaster starts and stops gives you complete control over your broadcasters. This let's you hook multiple pieces of UI together to offer to the user and allow them to manage the behaviors of your application. This lesson walks through creating a timer using a startWhen and a stopWhen operator which are hooked into buttons.

    Think of some other scenarios where have beginnings and ends controlled by events. For example, a mouse drag that starts with a mouse down and ends with a mouse up

    import { curry, pipe } from "ramda";
    
    document.getElementById("app").innerHTML = `
    <h1>Hello Parcel!</h1>
    <div>
      <button id="start">Start</button>
      <button id="stop">Stop</button>
    </div>
    `;
    
    const addListener = (selector, eventType) => (listener) => {
      const element = document.querySelector(selector);
      element.addEventListener(eventType, listener);
      return () => {
        element.removeEventListener(eventType, listener);
      };
    };
    const createInterval = curry((time, listener) => {
      let i = 0;
      const id = setInterval(() => {
        listener(i++);
      }, time);
      return () => {
        clearInterval(id);
      };
    });
    
    let startClick = addListener("#start", "click");
    let stopClick = addListener("#stop", "click");
    
    let timer = createInterval(100);
    
    // A event happen to trigger B event
    let startWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => {
      let cancelMain;
      let cancelWhen;
    
      cancelWhen = whenBroadcaster((whenValue) => {
        if (cancelMain) cancelMain();
        cancelMain = mainBroadcaster((value) => {
    if (value === done) {
          if (whenValue === done) {
        
            listener(done);
          }
         return
        }
        listener(value) }); });
    return () => { cancelMain(); cancelWhen(); }; }; let stopWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => { let cancelMain = mainBroadcaster(listener); let cancelWhen = whenBroadcaster((value) => { cancelMain(); }); return () => { cancelMain(); cancelWhen(); }; }; const operators = pipe(stopWhen(stopClick), startWhen(startClick)); operators(timer)(console.log); // startWhen(startClick)(stopWhen(stopClick)(timer)) (console.log)
  • 相关阅读:
    HashMap和Hashtable及HashSet的区别
    Android获取系统的时间
    Android的布局属性
    ListView 在代码里设置margin
    如何用Vue自己实现一个message提示插件
    JS获取最近三个月日期范围
    css实现表单label文字两端对齐
    my utils
    Vue 路由&组件懒加载(按需加载)
    C# 通过window消息控制指定控件的scroll滚动
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13915983.html
Copyright © 2011-2022 走看看